Common lifecycle use cases in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What React hook is used to run code when a component first appears on the screen?

The useEffect hook with an empty dependency array [] runs code once when the component mounts.

intermediate

How do you clean up resources like timers or subscriptions in React functional components?

Return a cleanup function inside useEffect. This function runs when the component unmounts or before the effect runs again.

intermediate

What is a common use case for running code when a component updates?

Use useEffect with specific dependencies to run code only when those values change, like fetching new data when a prop changes.

advanced

Why should you avoid running expensive code on every render in React?

Because it slows down the app. Use useMemo or useCallback to remember results and avoid unnecessary work.

advanced

How can you simulate componentDidMount, componentDidUpdate, and componentWillUnmount in React functional components?

Use useEffect: with empty dependencies for mount, with dependencies for update, and return a cleanup function for unmount.

Which React hook runs after every render by default?

A useMemo

B useState

C useEffect without dependencies

D useRef

useEffect without a dependency array runs after every render.

How do you run an effect only once when a component mounts?

A useEffect with empty dependency array []

B useEffect with dependencies

C useEffect with no arguments

D useState

An empty dependency array [] tells useEffect to run only once on mount.

What does the cleanup function inside useEffect do?

A Runs after every render

B Runs before the effect runs again or when component unmounts

C Runs only on mount

D Runs only on update

The cleanup function runs before the next effect or when the component unmounts.

Which hook helps avoid running expensive calculations on every render?

A useRef

B useState

C useEffect

D useMemo

useMemo memoizes values to avoid recalculating on every render.

To run code when a specific prop changes, you should:

A Use useEffect with that prop in the dependency array

B Use useState

C Use useRef

D Use useEffect with empty dependencies

Including the prop in useEffect's dependency array runs the effect when it changes.

Explain how to use the useEffect hook to handle component mount, update, and unmount in React functional components.

Think about when useEffect runs and how dependencies control it.

Describe why and how you would clean up resources like timers or subscriptions in React components.

Consider what happens if you don't clean up after effects.