Re-rendering behavior in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What causes a React component to re-render?

A React component re-renders when its state or props change. This means React updates the component's output to match the new data.

beginner

How does React decide if a component should update?

React compares the new props and state with the previous ones. If they are different, React re-renders the component to update the UI.

intermediate

What is the role of React.memo in re-rendering?

React.memo is a function that wraps a component to prevent unnecessary re-renders. It only re-renders if the props change, improving performance.

intermediate

Why can changing state with the same value still cause a re-render?

React re-renders because it does not deeply compare state values. Even if the value looks the same, setting state triggers a re-render by default.

intermediate

How can useCallback help with re-rendering?

useCallback returns a memoized function that keeps the same reference between renders. This helps prevent child components from re-rendering when functions are passed as props.

What triggers a React component to re-render?

A Change in HTML outside React

B Change in CSS styles only

C Change in unrelated variables

D Change in state or props

React re-renders components when their state or props change to update the UI.

What does React.memo do?

A Forces re-render every time

B Prevents re-render if props are unchanged

C Removes component from DOM

D Changes state automatically

React.memo helps avoid unnecessary re-renders by checking if props have changed.

Which hook helps keep function references stable to avoid re-renders?

A useCallback

B useState

C useEffect

D useRef

useCallback memoizes functions so they keep the same reference between renders.

If you set state to the same value, what happens?

A Component never re-renders

B Component crashes

C Component re-renders anyway

D State resets to initial

React triggers a re-render even if the new state value looks the same.

How does React check if it should re-render a component?

A By comparing new and old props and state

B By checking CSS changes

C By checking DOM changes outside React

D By user input only

React compares props and state to decide if a component needs to update.

Explain in simple terms what causes a React component to re-render and why this is important.

Think about what happens when data changes in your app.

Describe how React.memo and useCallback help improve performance by controlling re-rendering.

Consider how React decides to update components and how to avoid extra work.