Lifecycle mapping with hooks in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What React hook is used to run code after the component first renders?

The <code>useEffect</code> hook with an empty dependency array (<code>[]</code>) runs code after the first render, similar to <code>componentDidMount</code> in class components.

beginner

How do you run cleanup code when a React component unmounts using hooks?

Inside useEffect, return a function. This returned function runs when the component unmounts, similar to componentWillUnmount.

intermediate

Which hook replaces componentDidUpdate behavior?

The useEffect hook runs after every render by default. To mimic componentDidUpdate, use useEffect with specific dependencies to run code when those values change.

beginner

What does the dependency array in useEffect control?

The dependency array tells React when to re-run the effect. If empty ([]), it runs once after mount. If it has variables, it runs when those variables change.

intermediate

How can you run code only when a specific prop or state changes in a functional component?

Use useEffect with that prop or state in the dependency array. React runs the effect only when those values change.

Which hook is primarily used to handle lifecycle events in React functional components?

A useState

B useRef

C useContext

D useEffect

useEffect is used to run code on mount, update, and unmount, replacing lifecycle methods.

What happens if you omit the dependency array in useEffect?

A Effect runs only once after mount

B Effect runs after every render

C Effect never runs

D Effect runs only on unmount

Without dependencies, useEffect runs after every render.

How do you run cleanup code when a component unmounts?

A Return a function inside <code>useEffect</code>

B Use <code>useState</code> to reset values

C Call cleanup in the component body

D Use <code>useRef</code> to track unmount

Returning a function inside useEffect runs that function on unmount.

To run an effect only when a specific state changes, what should you do?

A Do not use <code>useEffect</code>

B Leave the dependency array empty

C Add that state to the dependency array

D Use <code>useState</code> instead

Adding the state to the dependency array triggers the effect only when it changes.

Which lifecycle method does useEffect(() => {}, []) mimic?

A componentDidMount

B componentWillUnmount

C componentDidUpdate

D render

An empty dependency array runs the effect once after the component mounts.

Explain how you can use React hooks to mimic the lifecycle methods: componentDidMount, componentDidUpdate, and componentWillUnmount.

Think about how useEffect runs after render and how dependencies control when it runs.

Describe the role of the dependency array in the useEffect hook and how it affects when the effect runs.

Consider how React decides when to re-run the effect.