> For the complete documentation index, see [llms.txt](https://docs.lovincyrus.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.lovincyrus.com/notes/web-development/react/hooks.md).

# Hooks 🎣

> Hooks are functions that give you React features like state and lifecycle methods without classes

1. Hooks to replace [higher-order components](https://reactjs.org/docs/higher-order-components.html) and [render props](https://reactjs.org/docs/render-props.html).
2. Hooks make it easier to reuse stateful logic.
3. **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.
4. Hooks are functions that let you “hook into” React state and lifecycle features from function components.
5. Hooks don’t work inside classes — they let you use React without classes.
6. Basically you can hook them whenever you want so you don't want to follow the conventional lifecycles. You can hook and unhook your code in your function. The code is cleaner this way.
7. Each *call* to a Hook has a completely isolated state — so you can even use the same custom Hook twice in one component.

#### State Hook  `useState`

* Call it inside a function component to add some local state to it
* `useState` returns a pair: the *current* state value and a function that lets you update it.

#### Context Hook  `useContext`

* Accepts a context object and returns the current context value for that context
* [`useContext`](https://reactjs.org/docs/hooks-reference.html#usecontext) lets you subscribe to React context without introducing nesting

#### Reducer Hook `useReducer`

*  [`useReducer`](https://reactjs.org/docs/hooks-reference.html#usereducer) lets you manage local state of complex components with a reducer

#### Effect Hook  `useEffect`

* It adds the ability to perform side effects from a function component
* Mainly used for data fetching, subscriptions, or manually changing the DOM from React components
* They are side effects because they can affect other components and can’t be done during rendering.
* It serves the same purpose as `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` in React classes, but unified into a single API.
* 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.
* <https://reactjs.org/docs/hooks-overview.html#effect-hook>

{% embed url="<https://github.com/rehooks/awesome-react-hooks>" %}

{% embed url="<https://reactjs.org/docs/hooks-rules.html>" %}