Understanding React Hooks and useEffect

useEffect lets you run side effects after every render, including the first one.

useEffect is a unified API that lets you use componentDidMount, componentDidUpdate, and componentWillUnmount.

effects are declared inside the component so they have access to its props and state.

effects may optionally specify how to “clean up” after them.

Hooks let you organize side effects in a component by what pieces are related (such as adding and removing a subscription), rather than forcing a split based on lifecycle methods.

Hooks are JavaScript functions, but they impose two additional rules:

We provide a linter plugin to enforce these rules automatically.

Hooks are more of a convention than a feature. If a function’s name starts with ”use” and it calls other Hooks, we say it is a custom Hook.

You can write custom Hooks that cover a wide range of use cases like form handling, animation, declarative subscriptions, timers, and probably many more we haven’t considered.

There are a few less commonly used built-in Hooks that you might find useful.