I'll try to be concise. React Hooks ware introduced in the React 16.8.. Hooks make it possible to organize logic in components, making them tiny and reusable without writing a class. In a sense, they’re React’s way of leaning into functions because, before them, we’d have to write them in a component and, while components have proven to be powerful and functional in and of themselves, they have to render something on the front end. That’s all fine and dandy to some extent, but the result is a DOM that is littered with divs that make it gnarly to dig through through DevTools and debug.
Well, React Hooks change that. Instead of relying on the top-down flow of components or abstracting components in various ways, like higher-order components (HOC), we can call and manage flow inside of a component.
Hooks apply the React philosophy (explicit data flow and composition) inside a component, rather than just between the components. Unlike patterns like render props or higher-order components, Hooks don’t introduce unnecessary nesting into your component tree.
Additionally, React Hooks can help you with:
- No need to learn, memorize, implement lifecycle methods:
This - componentDidMount
class Example extends React.Component {
componentDidMount() {
console.log('I am mounted!');
}
render() {
return null;
}
}
Turns into:
useEffect hook
function Example() {
useEffect(() => console.log('mounted'), []);
return null;
}
This - componentDidUpdate
componentDidMount() {
console.log('mounted or updated');
}
componentDidUpdate() {
console.log('mounted or updated');
}
Turns into:
useEffect(() => console.log('mounted or updated'));
componentWillUnmount
componentWillUnmount() {
console.log('will unmount');
}
Turns into:
useEffect(() => {
return () => {
console.log('will unmount');
}
}, []);
... just to name a few
- Complex components become hard to understand:
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 and in many cases it’s not possible to break these components into smaller ones because the stateful logic is all over the place. It’s also difficult to test them. 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. You may also opt into managing the component’s local state with a reducer to make it more predictable.
May I suggest looking into useEffect hook.
- Composable, Reusable Logic:
It’s hard to reuse stateful logic between components. 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. This makes it easy to share Hooks among many components or with the community. Essentially, we can build our own custom Hooks
We’ve merely scratched the surface of what React hooks are capable of doing, but hopefully, this gives you a solid foundation. Here are a few more pre-defined hooks:
userReducer()
An alternative to useState. Accepts a reducer of type (state, action) => newState, and returns the current state paired with a dispatch method.
useMemo()
Returns a memoized value. Pass a “create" function and an array of inputs. useMemo will only recompute the memoized value when one of the inputs has changed.
useRef()
useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.
useContext()
Now you can make use of Context API in functional components using useContext(). This saves you from the hassle of prop drilling.
Here are a few diagrams to [hopefully] drive the point home
React Hooks in essence
React Hooks - under the hood:
React Hooks lifecycle:
Class-based components lifecycle:
I hope you're a little bit hooked now :)
