TIL - React Hooks

April 07, 2020

What follows is notes from a class. Incomplete thoughts & code that probably will only make sense to me. Given enough time, even that may be a stretch! Reference at your own risk 😂

Slides

Intro to React Hooks

Hooks replace the old Class syntax!!

useEffect

The useEffect hook is a side effect, separate to the normal process you have going on in your functions. This can replace the lifecycle methods componentDidMount & componentDidUpdate & componentWillUnmount. componentWillUnmount only comes into play if your useEffect function returns a function: unmount

useEffect(
  // Callback
  () => {
    // Do something on mounting/updating
    const handler = setTimeout(() => {
    // just using a timeout as an example because it needs cleanup
    }, delay);

    // [optionally] Clean up when done (componentWillUnmount)
    return () => {
      clearTimeout(handler);
    };
  },
  // Dependencies:
  [value, delay] // Only re-run effect if these values change
);

More Hooks

Here are the docs for all the hooks.

My CodePen Pens

Tags icon Stacked price tag looking things Tags: