diff --git a/react/states_and_effects/how_to_deal_with_side_effects.md b/react/states_and_effects/how_to_deal_with_side_effects.md index f49a132b004..c85d1980f75 100644 --- a/react/states_and_effects/how_to_deal_with_side_effects.md +++ b/react/states_and_effects/how_to_deal_with_side_effects.md @@ -91,7 +91,9 @@ export default function Clock() {
-Usually, you do not need to add dependencies to your `useEffect`hook manually. Your linter should let you know about the dependencies it expects. Letting the linter show errors and fixing them instead of suppressing them is usually the best idea. On a general note, the following block does a good job of summing this point up. +#### Managing useEffect dependencies + +Usually, you do not need to add dependencies to your `useEffect` hook manually. Your linter should let you know about the dependencies it expects. Letting the linter show errors and fixing them instead of suppressing them is usually the best idea. On a general note, the following block does a good job of summing this point up. ```jsx useEffect(() => { @@ -113,7 +115,7 @@ useEffect(() => { Oh, it's not going berserk anymore! We still have an issue with the counter updating twice every second though. That can be understood as a [behavior caused by the React StrictMode](https://react.dev/reference/react/StrictMode#strictmode). It is supposed to help us catch bugs, so what is that bug here? -With `StrictMode`, the `App` component is mounted, unmounted, then mounted again. This behaviour of `StrictMode` is only in the development environment. Notice that every time the `useEffect` hook runs, a new `setInterval` is used. When the component is unmounted the first time, `setInterval` is not stopped, it keeps incrementing. This unnecessary behavior can be prevented by clearing the interval when the component is unmounted and that is where the third part of our `useEffect` hook comes in - the cleanup function. +With `StrictMode`, the `App` component is mounted, unmounted, then mounted again. This behavior of `StrictMode` is only in the development environment. Notice that every time the `useEffect` hook runs, a new `setInterval` is used. When the component is unmounted the first time, `setInterval` is not stopped, it keeps incrementing. This unnecessary behavior can be prevented by clearing the interval when the component is unmounted and that is where the third part of our `useEffect` hook comes in - the cleanup function. You can return a function from the callback in the `useEffect` hook, which will be executed each time before the next effect is run, and one final time when the component is unmounted. In this case, let us clean up the interval with a cleanup function. diff --git a/react/states_and_effects/introduction_to_state.md b/react/states_and_effects/introduction_to_state.md index 2e989f26b15..7802029803d 100644 --- a/react/states_and_effects/introduction_to_state.md +++ b/react/states_and_effects/introduction_to_state.md @@ -82,7 +82,7 @@ Hooks are functions that let you use React features. All hooks are recognizable 1. [State: A Component's Memory](https://react.dev/learn/state-a-components-memory) 1. [Render and Commit](https://react.dev/learn/render-and-commit) 1. Read this [article on React Reconciliation Algorithm](https://medium.com/javarevisited/react-reconciliation-algorithm-86e3e22c1b40) for a great explanation. -1. Head back to the colour changing background example from earlier in the lesson, and add a new state variable to keep track of the number of times the background color has been changed. Display the number of times the background color has been changed on the page. You will need to fork the codesandbox to do this, which requires a codesandbox account. Click "Open Editor" in the top right of the codesandbox embed, then "Fork" in the top right of the editor. +1. Head back to the color changing background example from earlier in the lesson, and add a new state variable to keep track of the number of times the background color has been changed. Display the number of times the background color has been changed on the page. You will need to fork the codesandbox to do this, which requires a codesandbox account. Click "Open Editor" in the top right of the codesandbox embed, then "Fork" in the top right of the editor.
diff --git a/react/the_react_ecosystem/project_shopping_cart.md b/react/the_react_ecosystem/project_shopping_cart.md index f17d7e76fd2..b7afa04adc3 100644 --- a/react/the_react_ecosystem/project_shopping_cart.md +++ b/react/the_react_ecosystem/project_shopping_cart.md @@ -38,6 +38,6 @@ By now you've come far from your React-baby days. You have tools like routers an } ``` - - **Cloudflare Pages**: As of the time of writing, unlike Netlify and Vercel, no additional steps are required as the default behaviour will allow `react-router-dom` to correctly handle redirects for SPAs. You can learn more about this at the [Cloudflare documentation on serving pages](https://developers.cloudflare.com/pages/platform/serving-pages/). + - **Cloudflare Pages**: As of the time of writing, unlike Netlify and Vercel, no additional steps are required as the default behavior will allow `react-router-dom` to correctly handle redirects for SPAs. You can learn more about this at the [Cloudflare documentation on serving pages](https://developers.cloudflare.com/pages/platform/serving-pages/).