Matheus Seabra
Matheus Seabra

Introducing React Hooks

React Hooks are a great new feature in React 16.8. React 16.6 brought some awesome new things like React.memo() and React.lazy and Suspense. The React team isn't stopping there.

Hooks are a feature that you'll end up using every single day of your React development. React Hooks are now out in React 16.8! Hooks are great because we get more tools as React developers.

If you want to use state or lifecycle methods you would normally have to change to using React.Component and classes. Hooks let us use these features in functional components!



What is a hook?

Hooks are plain JavaScript functions where you can make a Hook call. They let you use state and other React features without writing a class.


import React, { useState } from 'react';

function Example() {

  // Declare a new state variable, which we'll call "count"
  // Use array destructuring to define state a variable and 
  // a function to update the state
  const [count, setCount] = useState(0);

  return (
   
You clicked {count} times <button onClick={() => setCount(count + 1)}> Click me </button>
); }

Why are Hooks being proposed?


We know that components and top-down data flow help us organize a large UI into small, independent, reusable pieces. However, we often can’t break complex components down any further because the logic is stateful and can’t be extracted to a function or another component. Sometimes that’s what people mean when they say React doesn’t let them “separate concerns.”

These cases are very common and include animations, form handling, connecting to external data sources, and many other things we want to do from our components. When we try to solve these use cases with components alone, we usually end up with:

  • Huge components that are hard to refactor and test.

  • Duplicated logic between different components and lifecycle methods.

  • Complex patterns like render props and higher-order components.

The React team think that Hooks are their best shot at solving all of these problems. Hooks let us organize the logic inside a component into reusable isolated units:



Hooks doesn't introduce breaking changes

As the React team explains in the docs, developers can start gradually adopting Hooks without fear of breaking changes. This is great news for the following reasons:

  • Completely opt-in: You can try Hooks in a few components without rewriting any existing code. But you don’t have to learn or use Hooks right now if you don’t want to.

  • 100% backwards-compatible: Hooks don’t contain any breaking changes.

  • Available now: Hooks are now available with the release of v16.8.0.


Built-in Hooks



useState

One of the most basics hooks you'll find, it's used to control state just like you would declare a state object in a traditional stateful component. To use it, we define:

const [count, setCount] = useState(0);




useEffect

One of the main defiencies of functional components is handling side-effects, such API calls, asynchronous operations, DOM manipulations, etc. With useEffect, we can operate side-effects during our component rendering, like in the snippet below:

useEffect(() => { document.title = `You clicked ${count} times.` }, [count])




useContext

If you want to use the Context API with functional components, Hooks has you covered. Just define a variable, and assign useContext with the desired context:

const theme = useContext(ThemeContext)

Extend your hooks


These are the most basic hooks that are explained in the React documentation. However you can use much more native hooks created by the awesome React community.

Go Hooks!

You can learn more about hooks at React's documentation