React: How does bail-out work?

Bail-out is when React decides not to re-render a component because nothing has changed.

Simple analogy: Imagine you are a boss and every day you ask subordinates: "What's new?"

• Without bail-out: every employee writes a report every day, even if nothing changed.
• With bail-out: employee says: "Everything is the same as before" — and the report is not written.

How React decides whether to re-render:

1. Same state: If setState is called with the same value (via Object.is), React skips the re-render.

   jsxКопировать

   1const [count, setCount] = useState(0);
   2setCount(0);  // Same value — NO re-render!

2. React.memo: Wraps a component and checks props: if unchanged — does not re-render.

   jsxКопировать

   1const Button = React.memo(({ label }) => {
   2    return <button>{label}</button>;
   3});
   4// Button will not re-render if label is the same

3. useMemo / useCallback: If dependencies did not change — return stable references, and React.memo works.

4. React Compiler (React 19+): Automatically memoizes everything — bail-out works by default.

When this is useful: If you have a large list and you update one element — the rest should not re-render. React.memo + stable keys — this is bail-out for lists.