Effects and Refs
4 lessonsAbout 24 minutesIntermediate
This part of the React Tutorial runs from useEffect Explained through to useRef Explained. There are 4 lessons here, and working through them takes about 24 minutes at a steady pace.
It follows on from Forms and Inputs, so finish that first if you have not already — the examples below assume you are comfortable with it.
Each lesson below says what it covers before you open it. Read them in order the first time; afterwards this page works as a index you can jump back into when you need to check one thing.
- 1useEffect ExplaineduseEffect runs code after render for things outside React. Learn what counts as an effect, when it runs, and why most code does not belong in one.
- 2Effect DependenciesThe dependency array controls when a React effect re-runs. Learn the three forms, why an empty array is not always right, and how infinite loops start.
- 3Effect CleanupReturn a cleanup function from useEffect to cancel timers, remove listeners and ignore stale requests. Learn when cleanup runs and why it matters.
- 4useRef ExplaineduseRef holds a value that survives re-renders without causing one. Learn the two uses — DOM access and mutable storage — and when a ref is the wrong choice.