There are many React concepts that we need to know about, but they are not covered in most of the courses that we have seen.

So today, I will be selective about topics that I believe will be essential and important to some of you, and hope that it will help you in your application development.

Let’s get It Started

1. How is the state in React updated ???

As most of the videos have been learned their state can be created and updated using two hook useState and useReducer .

So let’s guess when updating the state of a component with either of these hooks, the state will be updated immediately or later.

Let’s see the code that everyone uses, when we click the button, we will increase the counter to 1.

What if I add another setCount call, the output will be 1 or 2 ????

After running, our code still returns 1. We obviously called setCount twice.

Oh that’s because React scheduled a state update when we first did a state update. Since it wasn’t implemented immediately (Learn more about asynchronous and not synchronous) the count variable was not updated before we tried to update it a second time. .

In other words, because state updates are scheduled, not immediately, the second time we call setCount, the variable count is still 0, not 1.

So how to fix this error, we can use the function available in useState as the setter , it allows us to get the previous state and return the value we want:

2. Use more useEffect than use just one.

When we call the API when we start on the page, most of us just use useEffect once and try to call the API calls as many times as possible:

Instead of trying to cram all of our API calls, we can use useEffect multiple times. Doing so allows us to separate our different functions into different functions for easier management.

For example componentDidMount , we need to do all the actions we want after mounted. We cannot break calls to our APIs into methods – each lifecycle method can only be used once.

The benefit of using React hooks is that we can break down our code based on what it’s doing:

3. No optimization of state updates (useState, useReducer).

A common common whenever we pass a call back function from a parent component to a child component is to prevent it from being re-created, unless its passed arguments have been changed.

We can perform this optimization with the help of useCallback .

The useCallback is created for the callback function to ensure that the child components are not unnecessarily recreated, which in turn has an impact on the performance of our components whenever re-rendering.

This is because whenever our parent component re-renders, it causes all of the child components to render as well. This is what causes our callback functions to be recreated every time we re-render.

However, if we are using a setter function to update the state we created with useState or useReducer, we don’t need to use useCallback.

This is explained in the React doc:

React guarantees that setState function identity is stable and won't change on re-renders. This is why it's safe to omit from the useEffect or useCallback dependency list.

4.useRef can maintain state over render times.

Sometimes very useful when we can reference a React element directly with the help of ref . We create React ref in with the help of useRef.

However, it should be noted that useRef cannot reference a certain DOM.

There are certain benefits to being able to store and update useRef values. It allows us to store a value that will not be in memory that will not be deleted when rendered again.

If we want to track a value over renderings with the help of a variable, it will be restarted every time the component renders. However, if you use a reference, the value stored in it will not change during our component impressions.

As we can see, no matter how many times the button is clicked, the state is updated and re-rendered, the action we want to perform is only performed once.

5. How to prevent our React app from crashing.

In the example below, we are trying to render the Header component in our application, but are performing an action that results in an error. Specifically, try to get a property with a null value: