React Behind The Hood

Intro

In this blog, We are going to walk through the way components are re-rendered, the way states work, optimizing performance, and more. As a React developer, understanding these topics are going to make your App less error-prone and will also make you understand everything you use. Let's get started.

Re-Rendering Components

React Components are re-evaluated when a state or a context changes which does not mean that the Real DOM is touched. React can detect the change that happened in the component content, hence, the changed elements are going to be re-rendered again, so when a component re-renders, that doesn't mean that the real DOM is evaluated again else it would cause performance issues.

useCallback Hook

We have the App component which is the root component; for example, when we change a state in it, it will re-render all nested components, which we might want to avoid, so to do so you have to export the nest components with the React.memo(component), so it won't re-render except if react configured that a prop was mutated. But the problem is that passing a reference value as a prop will cause the component to be re-evaluated even if you wrapped the component with React.memo causes the reference comparison of the func returns false, therefore it will re-render again. So how can we solve this? well, luckily we have a hook that can store a func reference across all re-renders of the component. It is the useCallback() hook which will keep the reference of any reference value; hence, it will compare the prev func prop with the same reference and so it will not re-render the component again. This hook accepts an array of dependencies. So if you used an external variable in the stored function, you have to pass it as a dependency, so it would update this variable on every component render.

State Updates & Scheduling

This is a concept that you must understand because it will decrease errors and unexpected behaviors. Each state has its updating function and we call this update function whenever we need to change the state. But the way the updating function is very important to understand. When we call the updating function, it will schedule a state update for this change, and again it will schedule it and it will not update it immediately and the reason for that is concerned in the React working logic; for example, if an input update state function is called it would have a higher priority than another state update. I guarantee that your React course tutor had warned you about using multiple useState hooks that depend on each other and instead you should use useReducer for complicated state handling. Also, this is the reason why the prev prop is passed in the state hooks, as react guarantees that you will have the previous state value, so by using that you avoid unexpected state change ordering. Briefly, states changes are scheduled by React by sorting its priority.

End of blog. Hope you found it useful. I would be thankful if you would like to support me on: Support me on buy me a coffee