Skip to content

Commit

Permalink
fix: formatting
Browse files Browse the repository at this point in the history
- formatting changes in `react/multiple-renders-and-fixes.md`.
- added a further reading footnote.
  • Loading branch information
byt3h3ad committed Mar 12, 2024
1 parent de70c4f commit bf30876
Showing 1 changed file with 11 additions and 9 deletions.
20 changes: 11 additions & 9 deletions react/multiple-renders-and-fixes.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

The how and why of `Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.`

- **Updating state inside the render**
## - Updating state inside the render

```JSX
function App() {
Expand All @@ -16,9 +16,9 @@ If you update the state directly inside your render method or a body of a functi

*State updates → triggers re-render → state updates → triggers re-render → …*

FIX:
**FIX:**

Use useEffect with an empty array as a dependency.
Use `useEffect` with an empty array as a dependency.

```JSX
function App() {
Expand All @@ -30,7 +30,7 @@ function App() {
}
```

- **Infinite loop in UseEffect**
## - Infinite loop in UseEffect

```JSX
function App() {
Expand All @@ -42,11 +42,11 @@ function App() {
}
```

If you keep updating a state inside useEffect with a property you update set as a dependency, it will cause an infinite loop.
If you keep updating a state inside `useEffect` with a property you update set as a dependency, it will cause an infinite loop.

*count updates → useEffect detects updated dependency → count updates → useEffect detects updated dependency → …*

FIX:
**FIX:**

If you want to update a state based on its previous value, use a functional update. This way, you can remove state property from the dependency list and prevent an infinite loop.

Expand All @@ -60,7 +60,7 @@ function App() {
}
```

- **Incorrectly set event handlers**
## - Incorrectly set event handlers

```JSX
export default function App() {
Expand All @@ -71,11 +71,11 @@ export default function App() {
}
```

It is not the right way to set event handlers. You need to provide a function to the `onClick`, not the result of the function execution. By executing a function before setting a handler, you update a state inside the render, which causes an infinite loop.
It is not the right way to set event handlers. You need to provide a function to the `onClick`, not the result of the function execution. By executing a function before setting a handler, you update a state inside the render, which causes an infinite loop[^1].

*State updates → triggers re-render → state updates → triggers re-render → …*

FIX:
**FIX:**

Set a function to `onClick` event. It is a proper way to set event handlers. This way state will only update after a click of a button and won’t cause an infinite loop.

Expand All @@ -88,3 +88,5 @@ export default function App() {
}
```

[^1]: [further reading](https://alexsidorenko.com/blog/react-infinite-loop/)

0 comments on commit bf30876

Please sign in to comment.