How to use React Hooks to give functional components their own “State”
State in React is something truly awesome.
It gives you the ability to create components which have the ability to change their values during the lifetime, whereas a components props never change. Once you give a component a prop, that prop is static and cannot be changed unless the component gets removed or re-rendered.
Although state is awesome, it is only accessible to use in components that are Class Based Ones, rather than in Functional Components, however React added “Hooks” a way Functional Components can change their value.
What are React Hooks?
A React Hook is uses a similar paradigm to that of Class State, but only for functional components…it gives Functional Components the ability to change their values without needing to be a class.
I built a simple app to show how React Hooks work:
Here is my app’s single Functional Component.
Its very basic and only contains of a “Screen” and buttons labeled 0–9 and ← for backspace.
Our goal here is that when we push one of these buttons, it gets appended to the display and ← will remove the last character…Simple right?
Heres our app
All the buttons work as we expect them… but how exactly does this work?
Lets dive deeper into the code
First things first, we need to import useState from react
This line of code is responsible for creating the React Hook, we use destructuring to break split up the useState array into two separate variables.
The first element is the variable that we want to change (similar to the thing in state that you wanted to change) and the second element in the array is a function which will set the value of the first element (similar to setting state but only for that specific variable).
So we created a variable named text and a function called changeText.
If we call changeText with any parameter it will change the value of text to that parameter. Here is an example of that
Next up we need to make our empty text box all of our buttons (except our backspace)and each of them should append themselves current value of text when they are clicked.
As you see above we have a p tag with an inner text of our text variable and each button has an onClick event to call an anonymous function which will use the changeText function to set the value of text.
Lastly we create our backspace button which will remove the last character from text when clicked.
As cool as React Hooks are, there are some major differences between Hooks and State that you should know
- Hooks ONLY work in Functional Components and do not work in Class Based Components
- setState used in classes merges state, however hooks do not. For example when you use setState and update one key in State, the state is automatically merged for you. However if you have a hook object with multiple keys and you try and update one of the keys, it will alter that key, however it will delete the rest of the keys because it does not merge. Hooks aren’t as smart and you have to give the function a parameter of what the objects new value or attributes should be.
The great thing is that you DO NOT NEED to use hooks if you don’t want to, the React devs have said they aren’t planning on removing classes from React so they are making React a bit more Functional and giving developers more options on how they want to create their React Applications.