useState Deep Dive

Introduction

I have been using the useState hook in React and wanted to gain a deeper understanding of its inner workings. As a result, I wrote a blog post.

In this article, I will introduce a portion of my explanation, but for a more detailed understanding, please refer to my blog post:

useState in React

In React, the state of a component is updated using the useState hook in functional components. To understand how useState works, it's important to understand the concept of closures in JavaScript.

Closures allow a function to access and manipulate variables that are outside of its scope, including variables from its parent function.

In the case of useState, React uses closures to store the previous state value so that it can be updated when the component is re-rendered. This allows functional components to have state management capabilities similar to class components.

Rules of Hooks

According to the React documentation, Hooks must be called in the same order every time a component renders. The state values of a component are stored in an array that is keyed by the component. If Hooks are used inside a loop or conditional statement, the order of the saved state values may not match the original order, causing the incorrect state to be referenced and resulting in an error.

Summary

• In React, to manage the state of a functional component,?we use values stored outside the component and access them through?closure?to compare and modify the state.
• The?useState?hook modifies the value outside the component, so immediately after a state change,?the component still references the previous value.
• Additionally, each component's state information is?stored in an array, so if a state-changing hook is used within a loop or conditional statement, it may reference the wrong value due to the hook being called in the wrong order.