What is the point of React Hooks?

Why Hooks?

Hooks were added to React 16.8 to bring the power of class component features to functional components (such as state management and lifecycle features.) They were a way of addressing deeper challenges and complications from exclusively using them in class components, detailed here.)

As Dan Abramov points out in this article:

Hooks let us organize the logic inside a component into reusable isolated units. [...] Hooks apply the React philosophy (explicit data flow and composition) inside a component, rather than just between the components. That’s why I feel that Hooks are a natural fit for the React component model.

Rule of Hooks

• Only call Hooks at the top level (of React functions)
  Do not call hooks inside loops, conditions, or nested functions. This rule ensures that Hooks are called in the same order each time a components renders.

• Only call Hooks from React functions
  You cannot call Hooks from regular JS functions, or from within class components. Instead, you can call Hooks from React function components, or from custom Hooks.

Hooks for Rendering Optimization

useMemo

• For reusing already computed values. Prevents unnecessarily calling the function again when the input values remain the same
• Example: Here answer is computed every time there is user input into the component that triggers a state change (even when the values passed into the function remain the same)
  • Changing const answer = add(val1, val2) to const answer = useMemo(()=> add(val1, val2), [val1, val2]) would prevent the component from calling the function again when the specified dependencies (val1, val2) haven't changed

useCallback

• For reusing functions, when input (or whatever values you set as dependencies) remains the same
• When a function is defined within a component, re-rendering re-creates the function over and over again, and passes down a new reference to the new function to its children components each time
• Particularly useful for handing functions down to children components as props. When dependencies remain the same, you can have React re-use the same function reference
• Example: Switching between light/dark mode (which triggers a state change and re-rendering of the App) should not affect the list components, which are dependent on the user input.
  • Changing const getItems = () => { return [input + 10, input + 100]; } to const getItems = useCallback(() => [input + 10, input + 100], [input]) - then clicking the mode switch button does not trigger a change in the function passed down to the children component
    

Custom Hooks

Designing a Hook for a specific purpose, such as fetching data, keeping track of a user's online status, connecting to a chatroom..

• "Hooks are reusable functions... When you have component logic that needs to be used by multiple components, we can extract that logic to a custom Hook." (1)
  • By doing this, you can hide the gnarly details of how you deal with some external system or a browser API. The code of your components expresses your intent, not the implementation. (2)
  • Example of reusable logic (official doc, outdated)
    • On why it's necessary to clean up after useEffect, read this link
• Custom Hooks let you share stateful logic, not state itself
  • Each call to a Hook is completely independent from every other call to the same Hook
• You should give use prefix to a function (and thus make it a Hook) if it uses at least one Hook inside of it (3)
  • this means just by reading the name of the component, you know it contains a React state inside of it
  • ...this isn’t enforced by React. In principle, you could make a Hook that doesn’t call other Hooks. This is often confusing and limiting so it’s best to avoid that pattern.
  • You can't use Hooks inside regular functions, only within custom Hooks.

Rules

• Hook names always start with use
• Generally custom Hooks are located in a separate 'hooks' directory
• Custom Hooks need to be 'pure' - since it will re-run whenever your component re-renders.
  • The custom Hook function should not return a value based on a condition. -> as in, do not design a custom Hook to be conditional

...another reason for why wrapping Effects in custom Hooks is often beneficial:

• You make the data flow to and from your Effects very explicit.
• You let your components focus on the intent rather than on the exact implementation of your Effects.
• When React adds new features, you can remove those Effects without changing any of your components.

References

A Complete Guide to useEffect
A Deep Dive Into React Hooks
Making Sense of React Hooks: 2018
Rule of Hooks
Reusing Logic with Custom Hooks