React Hook이 무엇인가요? 🎣

React is a free and open-source front-end JavaScript library for UI components, maintained by Facebook and a group of individual developers. However it's used, React is only concerned with state management and rendering that state to the DOM, initially through React state and lifecycle methods.

But that all changed when React 16.8 was introduced, its new addition of Hooks allow the use of state and other React features without writing a class. Hooks were developed to solve a bunch of unconnected problems in React. Some of the problems (are not limited too) include:

Hooks are simply just functions that let you “hook into” React state and lifecycle features. Unlike lifecycle methods, Hooks don’t work inside classes. Which can make working with them super flexible, since they let you use lifecycle features in function components. While React provides a few built-in Hooks like useState, you can also create your own Hooks to reuse stateful behavior between components.

When coding with React, you may perform data fetching, subscriptions, or manually changing the DOM. The React developers like to call these “side effects” since they affect other components, and can’t be done while rendering.

The Effect Hook, useEffect, adds the ability to effect from, you guessed it, a function component. Similar to componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, "useEffect" is unified into a single API.

Going off the example before, after React updates the DOM, the component sets the document title:

import React, { useState, useEffect } from 'react';

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

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

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

By calling "useEffect", you’re telling React to run the “effect” function you created after pushing changes to the DOM. Effects are declared inside the component, so they have access to props and state. By default, React runs the effects after every render, starting with the first one. Effects can also optionally specify actions to take after by returning a function. Hooks let you organize side effects in a component by what ideas are related, rather than forcing a split based on lifecycle methods.

Despite Hooks being Javascript functions, there are still several rules they must follow in order to maintain the black magic that gives them lifecycle features.

1. Only Call Hooks at the Top Level

   • Always use Hooks at the top level of your React function, before any early returns. This means don’t call Hooks inside loops, conditions, or nested functions. This ensures that Hooks are called in the same order each time a component renders, which allows React to correctly preserve the state of Hooks between varying useState and useEffect calls.

2. Only Call Hooks from React Functions

   • Don’t call Hooks from regular JavaScript functions. Try the following instead:
     • Call Hooks from custom Hooks
     • Call Hooks from React function components.

What if you want to go beyond just the Effect Hook? Well, there's an answer for that, build your own! By building your own Hooks, you can extract component logic into reusable functions. You may be use to doing this in React through: render props and higher-order components. But with the addition of Hooks, you can solve many of the same problems without adding more components to the tree. No one likes cluttered code!

Think about how share logic between two JavaScript functions, you extract it into yet another function. And since components and Hooks are functions, this works for them too!

A custom Hook is a JavaScript function whose name starts with ”use” and has the ability to call other Hooks.

React is constantly changing, and programmers who are focused on developing products may not have the time to learn and use every new API released. Hooks are still fairly new, so while they may come in handy, there's no rush to adopt them into your every day practices, unless that's what your heart desires.

Hooks were made to work side-by-side with existing code, which allows you to adopt them gradually, meaning there is no rush to migrate to Hooks. Do not feel the need to do some “big rewrite”, especially for existing, complex class components. It's a bit of a learning curve to start “thinking in Hooks”. So practice using Hooks in your unimportant work first, and once you, and anyone you're working with, feel comfortable with them, give them a go!

Hooks were made in hopes to one day cover all existing use cases for classes, but don't worry because class components aren't going anywhere soon. If you don't believe me, I'll quote the React developers themselves,

"At Facebook, we have tens of thousands of components written as classes, and we have absolutely no plans to rewrite them. Instead, we are starting to use Hooks in the new code side by side with classes."

Hopefully this article has inspired you to hook into your full React potential, or maybe you decided to not bother learning and using yet another API. Either way, let me know your opinion about Hooks, and where you see them going in the future. ✨ Happy Hooking! ✨