Frontend Journey #1 React basics

Life has been busy, but I have quit my job last month, and am trying to have some time off from work to focus on studying and making myself a better developer.

My aim is to become a full stack developer with solid understanding of web and programming in general. I will try to study for web development and coding tests for the time being.

This is the first blog that will kickstart my journey again.

Note : this is not a TUTORIAL. I won’t focus on how to use map, filter, or making a cool button. You can find those easily on the internet. I will focus on the core concepts of react.

State

A confusing concept at first, but is SOOOO simple if you understand it. You first have to understand that states are just data that CHANGES. If no datas change on the website, for let’s say that it is just a landing page explaining what the product does and nothing else, there is no need to use states. There is no state change going on.

If something, button, number, form, whatever changes in the website, that element has a state. A before and after.

A simple counter is the best example. If a button click results in the counter’s number to change, the counter has gone from 0 -> 1, a state change from 0 -> 1.

State allows us to make cool websites and is an important concept. People tell you to use ‘useState’ when declaring the state and it’s modifier. But why should we use ‘useState’?

useState

If we don’t use useState and update the state, the page will no rerender automatically. Under the hood, the data may change, but it will not be reflected in the UI. useState’s second value which is the modifier, modifies the data AND triggers a render. That is why we have to use useState when declaring and modifying state.

Tip for useState

const [counter, setCounter] = useState(0);

/* Normal way of using setCounter */
setCounter(counter + 1)
/* this method is not a good practice. Why? counter may not be
the latest state when the update is applied */

/* A better way would be : */
setCounter((current) => current + 1)
/* you can always access the current state through this way */

Lifecycle

A concept people explain in a hard way.

We know what DOM(Document Object Model) is. It is the CURRENT representation of the screen, the UI. If we route to a different page, or some state change occurs in the current page, the DOM is updated to reflect the CURRENT screen.

We know what components are. They are what make up the UI of the screen. A button, a banner, a form, whatever.

When the screen first renders, these components ‘come to life’ and fill up the screen. This is the first step of the lifecycle ; mounting

1. mounting : the first step

Component first comes to life and mounts to the DOM. It is created and rendered onto the screen.

There are few steps of mounting, and I will talk about the core steps only

• Constructor (creates the component)
• render (show the component on the screen)
• componentDidMount (check if the creation was successful)

2. Updating : the second step

Components will most likely be changed. That is the whole point of having interactive websites. When components are changed through state or props, an update occurs

• check if the component should get updated
• render (apply the changes)
• componentDidUpdate (check if the update was successful)

3. Unmounting : the death

When a page route occurs, or when the component is no longer VISIBLE on the screen, it is said to be unmounted. The component’s lifecycle has ended.

• componentWillUnmount (called before the component is unmounted from the DOM. Usually used for clean ups like resetting timer, network requests, etc)

Props

Another key idea in react. Just think of props as a way that ables us to send data from one component to another. It is somewhat similar to parameters in functions, which act as a way to kind of send data as input for the function.

Props can be anything. Strings, booleans, and even functions. Because javascript functions are first class citizens, functions can be passed as arguments.

Effects

Why do we need effects?

Some components need to synchronize with external systems like setting up a server connection. Effects lets you run this code after rendering so that you can synchronize your component with an external system.

An event is caused by the user’s interaction. Effects are run automatically without users interaction.

The official react document states that :

Effects let you specify side effects that are caused by rendering itself, rather than by a particular event.

• side effects generally refer to operations or behaviors that occur in a component’s lifecycle other than the rendering of the component itself.
• side effects : logic that is not related to the rendering of the UI.
• example : Data fetching, subscriptions, etc.

Only try to use effects when you need to steopout of React and synchronize with external system. You might not need an effect if your effect only adjusts some state based on other state.