- **Epistemic status:** #budding
- [API Reference](https://reactjs.org/docs/hooks-reference.html)
[[React]] hooks are functions that allow you to “hook into” [[React]] state and lifecycle features without the need of writing a class. The following example uses the `useState()` hook:
```JavaScript
import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
```
## Rules of Hooks
- **Only call hooks at the top level:** Don't call hooks inside loops, conditions, or nested functions, but instead use them at the top level of the [[React]] function before any early return to preserve the order of operations when the component renders.
- **Only call hooks from React Functions:** Don't call hooks from regular [[JavaScript]] functions, but instead call them on [[React]] components and custom hooks.
---
## References
- _10 React Hooks Explained // Plus Build Your Own from Scratch_, 2021. <https://www.youtube.com/watch?v=TNhaISOUy6Q>.
- “Hooks at a Glance – React.” Accessed August 26, 2022. <https://reactjs.org/docs/hooks-overview.html>.
- “Introducing Hooks – React.” Accessed August 26, 2022. <https://reactjs.org/docs/hooks-intro.html>.
- “Rules of Hooks – React.” Accessed August 26, 2022. <https://reactjs.org/docs/hooks-rules.html>.