useState and useReducer hooks in ReactJS

useState and useReducer hooks in ReactJS

In this podcast you will learn about the two most important hooks, which are useState and useReducer.

These two hooks provides the state functionality to a functional component.


useState take a initial value as a parameter and returns an array with state value and a function which sets state (setState). On calling the setState function with updated value will make the component re-render with latest state value.

1const [show, setShow] = useState(false)


useReducer is similar to useState but its syntax is similar to redux. It is much useful when your component is growing in terms of number of state variables. All the state variables can be combined into a single reducer.

It takes two arguments, first is the reducer function and second is the initial value. It returns an array with two items, first items gives the state and second item is the dispatch function which is used to update the state.

1const [state, dispatch] = useReducer(reducerFn, {
2 show: false,
3 isAdmin: true,
4 username: 'pranesh',
Built with ❤️ and  Gatsby