Understanding State Hook
- State hook: allows us to add state to function components.
- Hooks can only be called at the top of components: You can't use hook inside of
for loop,if elseand nested functions. React relies on the order of hook so it can map the values to the local variable inside the function - State is stored outside of the component: State variables, unlike local variables in a function, stay in memory as long as the component is visible on the screen. This is because state is tied to the component instance, and React will destroy the component and its state when it is removed from the screen.
- React updates state in an asynchronous manner, so updates are not applied immediately. Instead, they’re batched and applied at once after all event handlers have finished execution. Once the state is updated, React re-renders our component.