I wanted a better understanding of the commonly used React Hooks. A few days ago, I took a look at the useContext Hook. Today, I’m diving into useEffect by reading through React’s documentation on useEffect.
useEffect
- When do you use useEffect?
- When a component needs to synchronize with external systems (outside of React)
- Connecting to: network, browser API, third-party library
- More specific “external system” examples: setInterval, clearInterval, eventListener that listens to the global window object
- Personal usage: Attempt to use useEffect to synchronize todoList items with React component and
localStorage(localStorageis browser’s Web Storage API)
- What is a setup, and when does it run?
- Setup is a function that has the Effect’s logic.
- It runs whenever component (with the said useEffect hook) is added to the DOM (and also when the component re-renders).
- When does the effect setup re-run?
- It re-runs whenever the dependencies (that are passed through the useEffect as second parameter) are changed.
- Specific: it runs after initial render and after re-renders with changed dependencies.
- What could the setup function potentially return?
- An optional cleanup function - disconnects from the external system
- When does the cleanup function run?
- The cleanup function runs after each re-render due to changed dependencies.
- Also runs when component is removed from the DOM.
- What can you pass as an argument for the ‘dependencies’ parameter?
- Any reactive values - props, state, all variables declared inside component
- What happens if you don’t pass anything to the dependencies parameter?
- The Effect will re-run after every re-render of the component.
- Usually, you would pass something to the dependencies (esp. if Effect uses reactive values) to prevent infinite loops.
- What is something particular that happens with regards to useEffect’s setup and cleanup function when the project is in development mode? WHY?
- React runs the setup and cleanup function once before the setup.
- This is a test for any bugs (we call this connect-and-disconnect cycle)
- What is the general rule of reactive values if I’m using them within the Effect code?
- I should be passing them as dependencies in the said Effect.
- If I’m using the reactive value within the Effect, it only makes sense (usually) that the Effect re-runs when those particular values change.
- What hapepns if you pass an empty
[]as a dependency list to an Effect?
- The Effect will only run once, regardless of the component’s props or state change.
- ** Note: it does run again in development mode **
- Why is it important to remove unnecessary object or function dependencies?
- Objects or functions that are created during rendering will be recreated (and be different for every render).
- Even if the object or function’s code looks the same - essentially it is recreated so the Effect that is dependent on this function or object will also re-run unnecessarily.
- Solution: create the object within the Effect setup logic.
Thoughts after reading useEffect docs:
- Next step is to read on useRef - definitely don’t understand it well enough and this hindered my ability to comprehend some of the code in the useEffect doc.