Quick Introduction to React Hook

You might have heard of React Hook, right? React Hook is a new feature of React that help us to manage state and lifecycle in Functional component. Before that, We can only do this in Class component, but now we can do the same thing with Functional component as well. Isn't it cool, huh?

In this post, we will explore some neat features of React hook and learn how to use it in our app. Let's get started.

Introduction to useState

This API is a simplified version of setState you might familiar with. useState is a function that takes the initial state, which returns an array of the current state and a function that use to set a new state. See the example below.

import React from "react"

const Car = () => {
  const [speed, setSpeed] = React.useState(0)

  return (
    <div>
      <h1>speed: {speed} km/hrs</h1>
      <button onClick={() => setSpeed(speed => speed + 10)}>+10 speed</button>
    </div>
  )
}

Introduction to useEffect

This API helps us to manage lifecycle in Functional component when state or props has changed its own value.

useEffect is a function that accepts two parameters as input. The first parameter is a callback function and the second one is an array of dependencies.

// Car.js

import React, { useEffect } from "react"

function mockFetch(value) {
  return new Promise(resolve => {
    return setTimeout(() => {
      return resolve(value)
    }, 300)
  })
}

const Car = () => {
  const [speed, setSpeed] = React.useState(0)
  useEffect(() => {
    const getInitialSpeed = async () => {
      const result = await mockFetch(40)
      setSpeed(result)
    }
    getInitialSpeed()
  }, [])

  return (
    <div>
      <h1>speed: {speed} km/hrs</h1>
      <button onClick={() => setSpeed(speed => speed + 10)}>+10 speed</button>
    </div>
  )
}

The array of dependencies help useEffect decides when to execute a callback function. In this case, if we do not provide any dependencies, useEffect will execute callback once when the component is initialized.

If you want useEffect to execute a callback function when dependencies are changed, you can do it so. See the example below.

// ...
useEffect(() => {
  if (gas <= 0) {
    setSpeed(0)
  }
}, [gas])

Let's say parent component pass gas to <Car /> component. Every time the value of gas changed, useEffect will execute callback function.

Make your own Hook!

Now, we will make our own hook by combine useState and useEffect that we have learned in a previous topic.

function useCarController(gas) {
  const [speed, setSpeed] = React.useState(0)

  useEffect(() => {
    const getInitialSpeed = async () => {
      const result = await mockFetch(40)
      setSpeed(result)
    }
    getInitialSpeed()
  }, [])

  useEffect(() => {
    if (gas <= 0) {
      setSpeed(0)
    }
  }, [gas])

  return { speed, setSpeed }
}

const Car = ({ gas }) => {
  const { speed, setSpeed } = useCarController(gas)
  return (
    <div>
      <h2>speed: {speed} km/hrs</h2>
      <h2>gas: {gas} %</h2>
      <button onClick={() => setSpeed(speed => speed + 10)}>+10 speed</button>
    </div>
  )
}

You can see that we can create our custom hook to extract implementation details out of the component.

Conclusion

React Hook make me working with React easier and make my code cleaner. By the way, React Hook also have other interesting API that I didn't mention on this post. If you guys want to learn more about it you can check it on the official site. Thanks for reading and Happy coding.

The original post is published on codenothing.co