What is useReducer in React How to use it? What is diffrence between useState and useReducer?
To make your code more readable, you can move all your state updates into a single function that can exist outside your component. While performing the required operations, your component just has to call a single method and select the operation it wants to perform.
The function which contains all your state updates is called the reducer. This is because you are reducing the state logic into a separate function. The method you call to perform the operations is the dispatch method.
How the useReducer Hook Works
You can add a reducer to your component using the useReducer hook. Import the useReducer method from the library like this:
import { useReducer } from 'react'The useReducer method gives you a state variable and a dispatch method to make state changes. You can define state in the following way:
const [state, dispatch] = useReducer(reducerMethod, initialValue)The reducer method contains your state logic. You can choose which state logic to call using the dispatch method. The state can also have some initial value similar to the useState hook.
In this example, we define a reducer function that takes the current state and an action as input and returns the new state based on the action type. The reducer handles action types: 'INCREMENT'. For each action type, we update the count property of the state accordingly.
Inside the Counter component, we initialize the state using useReducer and pass in the reducer function and the initial state object { count: 0 }. useReducer returns the current state and a dispatch function to dispatch actions.
We define two functions, increment and decrement, which dispatch the respective actions when the corresponding buttons are clicked. The current count is displayed using state.count.
Finally, in the App component, we render the Counter component and any other content you may want to include.
Note: This example assumes that you have set up a React project with the necessary dependencies and have a build system in place, such as Create React App or webpack.
You can use any name you like for the reducer function. In the example I provided, I named it reducer for simplicity and clarity. However, it is not an inbuilt name, and you are free to choose a different name that makes sense in the context of your application.
Similar to the reducer function, you can also choose different names for the state and dispatch variables. In the previous examples, I used state and dispatch for clarity and convention, but you are not limited to those names.
Here’s a tabular comparison between useReducer and useState in React:
In summary, useReducer is suitable for managing complex state and state transitions, where you have multiple actions and a more structured approach. On the other hand, useState is simpler and more straightforward, ideal for managing basic state in simpler components without the need for explicit action types and transitions.