Quick Introduction to React Hook
Tags: react, javascript, beginners
Published: 2019-05-01 07:38:12

---
title: Quick Introduction to React Hook
published: true
description: Learn how to use React Hook and make your own hook.
tags: '#react, #javascript, #beginners'
---

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.

```jsx
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.

```jsx
// 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.

```jsx
// ...
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.

```jsx
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 }
}
```

```jsx
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](https://www.codenothing.co/blogs/react-hook-in-3-minutes/)_