React useState Hook
An introduction on how to use useState Hook in your React application
Thursday, October 21, 2021
What is a React hook?
From the React's official documentation
Hooks are a new addition in React
16.8. They let you use state and other React features without writing a class.
What does it mean?
To give you more context, before
React v16.8, we can only enable a component
to have a state and manage it if a component is created using a
Functional component is mainly used as a dumb component where the decision on how to render it differently is derived from the
props it will receive from its parent component.
If you notice, we need fewer keystrokes to create a functional component,
but the problem is it would not be reactive to state changes.
Let's try to mimic all the
class component behaviors to our
You can modify the component all day long; however, it won't react to state changes.
What if we can have the simplicity of the
functional component and still have
the ability to react to state changes?
React hooks to the rescue!
As per the title of this blog, I will only discuss
which is the solution related to our previous problem.
I will discuss the other types in another blog.
Here are some ways on how to can create a
As mentioned in the above examples, here's what you can pass in a
useState as an argument:
- primitive value
- object or array
- function(discussed in this blog)
If you passed one, it would serve as the default state for that instance, else default state will be null
useState is invoked, it will return an array.
The first element is the
state and the second element is the
A simpler and more readable way to access the
state and the
state updater is by using
array destructing assignment.
The convention for the second element is to prepend it with
set, then make it
Let's replicate the behavior of the class component in a function component using a
Hooray! We just created a much simpler stateful component using
Let's break down what happened.
We created a new state with a default value of
attribute will serve as the variable containing the default and future value of this hook.
setAttribute will be the function that can modify our state
We define a method that will handle the change event from our
We display the
state and attach
You can also simplify further if you want
Does it mean we should not use a
class component ever again?
I always use the
functional component approach, but if I'm working on a very old codebase where there's no way to migrate to the newer version, I will use a
Also, it is written in the React documentation that
There are no plans to remove classes from React.
However, there are some use cases like when using Inheritance, creating Error Boundary, explicit lifecycle methods, and such that cannot be directly done using a
functional component, although there are many workarounds to apply the expected behavior.
useState will simplify how we can create a component.
Less code means fewer bugs(if used properly) and is easier to read, resulting in better maintainability.