React Hooks

Rules of react hooks

- Don't call Hooks inside loops, conditions, or nested functions - Only Call Hooks from React Functions

Problem: Classes confuse machines

Additionally, React has been out for about five years, and we want to make sure it stays relevant in the next five years. As Svelte, Angular, Glimmer, and others show, ahead-of-time compilation of components has a lot of future potential. Recently, we've been experimenting with component folding using Prepack, and we've seen promising early results. However, we found that class components can encourage unintentional patterns that make these optimizations fall back to a slower path. Classes present issues for today's tools, too. For example, classes don't minify very well, and they make hot reloading flaky and unreliable. We want to present an API that makes it more likely for code to stay on the optimizable path.

Organizational Benefit of useEffect

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 can split up complex components

Hooks let you split one component into smaller functions based on what pieces are related (such as setting up a subscription or fetching data), rather than forcing a split based on lifecycle methods.

Hooks add functionality to functional components

Hooks let you use more of React's features without classes. Conceptually, React components have always been closer to functions. Hooks embrace functions, but without sacrificing the practical spirit of React.

Problem: It's hard to reuse stateful logic between components

React doesn't offer a way to attach reusable behavior to a component. Render props and higher-order components try to solve this. But this can be cumbersome and makes code hard to follow.

Why does the first rule exist

The React team are stipulating the usage rules because not following them will lead to inconsistent data.

Problem: too much functionality in one component. Unrelated functionality often grouped together in lifecycle methods

We've often had to maintain components that started out simple but grew into an unmanageable mess of stateful logic and side effects. Each lifecycle method often contains a mix of unrelated logic. For example, components might perform some data fetching in componentDidMount and componentDidUpdate. However, the same componentDidMount method might also contain some unrelated logic that sets up event listeners, with cleanup performed in componentWillUnmount. Mutually related code that changes together gets split apart, but completely unrelated code ends up combined in a single method. In many cases it's not possible to break these components into smaller ones because the stateful logic is all over the place.

How useEffect hook works

When you call useEffect, you're telling React to run your "effect" function after flushing changes to the DOM. Effects are declared inside the component so they have access to its props and state. By default, React runs the effects after every render — including the first render. Effects may also optionally specify how to "clean up" after them by returning a function.

How hooks can help with code cleanliness

With Hooks, you can extract stateful logic from a component so it can be tested independently and reused. Hooks allow you to reuse stateful logic without changing your component hierarchy.

Effect Hook useEffect

adds the ability to perform side effects from a function component. It serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but unified into a single API

Problem: Classes confuse both people

classes can be a large barrier to learning React. You have to understand how this works in JavaScript, which is very different from how it works in most languages. You have to remember to bind the event handlers

React Hooks

functions that let you "hook into" React state and lifecycle features from function components. React provides a few built-in Hooks like useState. You can also create your own Hooks to reuse stateful behavior between different components.

useReducer Hook

lets you manage local state of complex components with a reducer

useContext Hook

lets you subscribe to React context without introducing nesting:

React Side effects

things that can affect other components and can't be done during rendering. data fetching, subscriptions, or manually changing the DOM