Notes on React useEffect
Last updated on 21 Mar. 2024
Note: This post is a details-post for the post: Learning web app development through free online tutorials – Organized Notes and Log, https://raviswdev.blogspot.com/2024/03/learning-web-app-development-through.html .
Learn React Hooks: useEffect – Simply Explained!, https://www.youtube.com/watch?v=-4XpG5_Lj_o , 14 min. 6 secs.
* Good explanation of useEffect dependencies: https://react.dev/reference/react/useEffect#examples-dependencies
* Good explanation of when useEffect setup and cleanup functions are called in the context of chat room component: Connecting to an external system, https://react.dev/reference/react/useEffect#connecting-to-an-external-system
It states:
--- start short extract ---
React calls your setup and cleanup functions whenever it’s necessary, which may happen multiple times:
1. Your setup code runs when your component is added to the page (mounts).
2.After every re-render of your component where the dependencies have changed:
* First, your cleanup code runs with the old props and state.
* Then, your setup code runs with the new props and state.
3. Your cleanup code runs one final time after your component is removed from the page (unmounts).
--- end short extract ---
It also provides code writing advice:
--- start short extract ---
Try to write every Effect as an independent process and think about a single setup/cleanup cycle at a time. It shouldn’t matter whether your component is mounting, updating, or unmounting. When your cleanup logic correctly “mirrors” the setup logic, your Effect is resilient to running setup and cleanup as often as needed.
--- end short extract ---
To understand when useEffect() setup and cleanup functions are invoked, I wrote a test program (key files: App.js and index.css whose source code is provided lated on in this post) with only two components App and Testform. The components and associated dependencies are:
- App : useEffect() with App. component's postTitle as dependency
- TestForm : useEffect() with empty dependency array.
I used console.log to print out when useEffect() setup and cleanup functions are invoked. As one shows/hides the form and clicks the "Set App Post Title and Body" button on the test form which sets App component's appPostTitle and appPostBody state variables, useEffect() functions are triggered and its console.log statements appear on console log.
Note that in development, useEffect() is invoked twice when a component is created, and it will be invoked only once on component creation in production or if StrictMode is removed for App component in index.js. To avoid confusion, I removed StrictMode for App component in index.js for the observations made below.
The observations from it are:
1) As expected, on component creation (component getting mounted), its useEffect setup is invoked. In the case of TestForm component it is created only when Show/Hide button is toggled to Show it (if it is hidden). When TestForm component is removed (unmounted) by using the Show/Hide button its useEffect cleanup is invoked.
2) Setting the App component's Post Title by specifying a different value from what it has, using TestForm Post Title input box and clicking on "Set App Post Title and Body" button (which triggers code that sets App component's Post Title state variable (appPostTitle), triggers App component's useEffect cleanup with old value of its Post Title (appPostTitle) followed by its useEffect setup with new value of its Post Title (appPostTitle).
3) Setting the App component's Post Title (appPostTitle) by specifying the same value from what it has, using TestForm Post Title input box and clicking on "Set App Post Title and Body" button (which triggers code that sets App component's Post Title state variable (appPostTitle)), does NOT trigger App component's useEffect cleanup or its setup. This is as expected.
App.js source code:
index.css source code:
Comments
Post a Comment