React Hooks makes everything simple
We all familiarize ourselves with the traditional class-based React components. Sometimes we use functional components for some display components that do not need to use state. The functional components have fewer lines of code and more approachable. For example, if you want to call aprops that was passed down from a higher-level component, you can just use props instead of this.props which is always use for class components. I love using functional components to write a React app but it has some drawbacks compared with class components. We can not initialize state in functional components...
…Until Hooks was released with React 16.8.0 version. All the applications are running React versions below 16.8.0 do not support Hooks. So check your package.json file to make sure your application runs the new React version before playing around with Hooks. In this blog, I will write about the way we use Hooks with functional components instead of class components. The below picture is one class component in my React app
- State and useState
For Hooks, we will write a functional component, so we need to import useState instead of Component from React to handle initializing state.
When declaring a new state variable, in this example we need the sushis state, we can write like this
const [sushis, setSushis] = useState([])
setSushis is a method to set the new state for just sushis state. We declare the initialized value of sushis state as a parameter of the method useState. In this example, we need an empty array. You need to write the same format for other state variables that you want to use.
So far, our component will look like this:
2. useEffect
If we need to load data from a remote endpoint, we should place the fetch call inside the componentDidMount() function. This function is invoked right after a component is mounted. Normally, the functional components cannot use componentDidMount(), but Hooks useEffect() can handle it for us.
Before using useEffect(), import it as the way we import useState above:
import React, { useState, useEffect } from 'react';
Now our fetch call will like this:
The useEffect() method has a second argument called dependencies array after function you write. It is often an empty array if you don't want your function to execute after each re-render. The dependencies array can include some state variables. If any of the elements of that array change or update, the first function will execute again.
3. Render Props
Now all state variable we write before by using this.state.state_name will just need to use state_name . For example, before we call this.state.sushis, now we just need to call sushis but still keep the same features. Sounds amazing, right?
Our functions handleEaten() and changeSushis() will become
Then do the same with the render view and passing props to other sub-components.
So simple, right? When you get familiarize with Hooks, you will not want to use class components anymore. It makes everything simple. You are no longer to scroll all the way up to see the component you are writing is either class or functional component to use props or this.props anymore. Just functional component from now and then.
Happy Coding!
