What are the differences between the state variable managed by the ‘useState’ hook and the state variable managed by the Redux store?
1. What is an overview of these 2 types of variables?
In React, there are two types of state variables: locally managed state, which is typically managed using the ‘useState’ hook and globally managed state, which is commonly managed by the Redux library. Locally managed state is used to track the internal state of a single component, while globally managed state is used to track the state of entire application. The choice of which type of state to use depends on the specific needs of the application and the preferences of the development team.
2. What are their characteristics?
The two types of state variables in React serve different purposes.
The state variable of ‘useState’ hook is used to store data that can change over time within a specific component. When the value of s state variables changes, React automatically re-renders the component to reflect the updated value.
The state variable in Redux store is used to store data that is global to entire application. This data can be accessed and updated from any component within the application.
3. Where are they defined in source code?
I’m sure you’ve already guessed the answer to this question by now but allow me to recap and give examples to make sense.
The two types of state variables are defined in different places within the source code.
3.1 The local state is defined within individual components. This allows each component to manage its own state separately from other components.
Let’s refer to the example below!
This is a declaration of a React state variable called ‘dark’ using the ‘useState’ hook.
The initial value of the ‘dark’ variable is ‘false’.
‘setDark’ is a function that can be used to update the value of ‘dark’.
3.2 The global state is defined in a single global state object. This centralizes the management of the state and allows the state to be accessed and updated from any component within the application.
By defining the state in this way, Redux enables the state to be managed in a consistent and predictable manner across the entire application.
Let’s refer to the example below!
Let me summarize 3 critical things about Redux first:
State, action, reducer
Unlike useState’s state variable, we don’t define variables in a specific component but define it in separate files.
In the example below I created a file named count.js in redux folder to store the state variable. There is a variable named count.
From components, when we dispatch actions to the redux store, the reducer functions will receive and return the new values of the variable.
✿Note
useSelector is a hook to read data from Redux.
4. What are their life cycles?
You can search for the 2 above source codes here:
2. https://github.com/khanh1010/redux-toolkit-demo-app
Thank you for reading.
Stay tuned!
