###### Table of Contents
- [[#⚡ useEffect Hook]]
- [[#⚡ useState Hook]]
- [[]]
- [[]]
#Hooks
A hook is a function that allows you to add some functionality to a component. Hooks allow function components to become stateful.
### ⚡ useEffect Hook
A function is said to have a side-effect when the function changes a non-local state or when its output is not deterministic.
It is safe for a function to mutate variables within its scope; however, when it **uses or changes** things outside its scope, like a variable passed by reference, global variable, reading user input from the console, logging to console, doing database operations, etc., these are called side-effects.
Side effects” (or “effects” for short) are operations that can affect other components and can’t be done during rendering; examples include: data fetching, subscriptions, or manually changing the DOM.
The [Effect Hook](https://reactjs.org/docs/hooks-overview.html#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.
The component renders initially, when it first loads; but it also re-renders when the state changes. `useEffect` allows you to run a function during every render of the component.
### ⚡ useState Hook
A built-in hook used to handle state changes in the application (i.e., allows React state to be added to function components)
The `useState` hook returns an array with two values:
The first value is the current state, and the second is the function to update the current state:
`useState` returns an array with exactly two values:
1. The current state. During the first render, it will match the `initialState` you have passed.
2. The `set` function that lets you update the state to a different value and trigger a re-render.
```js
function useState(initVal) {
let state = initVal
const setState = (newVal) => {
return state += newVal;
}
return [state, setState];
}
// use array destructuring to unpack the values into distinct variables
const [state, setState] = useState(1)
state //➞ 1
setState(30) //➞ 31
```
## Example
```jsx
import React, { useState } from "react";
import ReactDOM from "react-dom";
function App() {
const [status, setStatus] = useState("Open");
return (
<div>
<h1>Status: {status}</h1>
<button onClick={() => setStatus("Open")}>
Open
</button>
<button onClick={() => setStatus("Back in 5")}>
Break
</button>
<button onClick={() => setStatus("Closed")}>
Closed
</button>
</div>
);
}
ReactDOM.render(<App />, document.querySelector("#root"));
```
### Hook No-nos
Do **not** put hooks in conditional statements or loops
#### More info
[How to Use the `useState()` Hook in React – Explained with Code Examples](https://www.freecodecamp.org/news/usestate-hook-3-different-examples/)
[State: A Component's Memory](https://react.dev/learn/state-a-components-memory)
[`useState` - react.dev](https://react.dev/reference/react/useState)
___
**Tags**: