Useful Cheatsheetsusefulcheatsheets.com

React Lifecycle

Chapter 14 · Page 98

Intermediate

React Lifecycle

Understand React component lifecycle phases and map class methods to hooks.

TL;DR

01Every component goes through mount, update, and unmount phases.
02Class lifecycle methods map onto specific hooks and timing rules.
03React skips re-renders when memoization or keys say state is unchanged.

Tips

01Map each class lifecycle method to its hooks equivalent one at a time when migrating, rather than rewriting a whole component at once.
02Use React.memo or PureComponent to skip unnecessary re-renders instead of fighting them with manual shouldComponentUpdate logic.

Warnings

01Calling setState synchronously inside componentDidMount or its hook equivalent forces React to render twice before the browser paints anything.
02Updating state after a component unmounts logs a warning in class components and can cause stale closures in hooks-based equivalents.

Notes

Useful Cheatsheetsusefulcheatsheets.com

React Lifecycle

Chapter 14 · Page 99

Intermediate

React Lifecycle

(continued)

Component Lifecycle Phases

Mount: component is created and inserted into the DOM.
Update: component re-renders due to state or prop changes.

Unmount: component is removed from the DOM.

function Component() {
  // Mount: run once
  useEffect(() => {
    console.log("Mounted");
  }, []);
  
  // Unmount: cleanup
  useEffect(() => {
    return () => console.log("Unmounting");
  }, []);
}

React 18 Strict Mode mounts, unmounts, then remounts in development.

// In development with Strict Mode, lifecycle methods run twice
// This is intentional — it proves teardown and setup are symmetric

The same component instance updates without dismounting on re-renders.

// Changing props or state updates the component
// — it does NOT unmount and remount

A changed key prop forces React to unmount the old instance and mount a fresh one.

// Changing the key remounts the component from scratch,
// resetting all of its internal state
<UserPanel key={userId} />

Notes

Useful Cheatsheetsusefulcheatsheets.com

React Lifecycle

Chapter 14 · Page 100

Intermediate

React Lifecycle

(continued)

Class Lifecycle Methods

componentDidMount fires once after the component is first inserted into the DOM.

class Profile extends React.Component {
  componentDidMount() {
    console.log("Mounted, safe to fetch or measure DOM");
  }
}

componentDidUpdate fires after every re-render except the first, receiving previous props and state.

componentDidUpdate(prevProps, prevState) {
  if (prevProps.userId !== this.props.userId) {
    this.loadUser(this.props.userId);
  }
}

componentWillUnmount fires once, right before React removes the component from the DOM.
```
componentWillUnmount() {
  this.subscription.unsubscribe();
}
```

shouldComponentUpdate runs before re-rendering and can return false to skip the render entirely.

shouldComponentUpdate(nextProps) {
  // Skip re-render if the displayed value hasn't changed
  return nextProps.value !== this.props.value;
}

getDerivedStateFromProps runs before every render to sync state from incoming props.

static getDerivedStateFromProps(props, state) {
  if (props.id !== state.prevId) {
    return { selected: null, prevId: props.id };
  }
  return null;
}

Notes

Useful Cheatsheetsusefulcheatsheets.com

React Lifecycle

Chapter 14 · Page 101

Intermediate

React Lifecycle

(continued)

Class to Hooks Mapping

componentDidMount maps to useEffect with an empty dependency array, since both run once after the initial render.
```
// Class: componentDidMount() { ... }
useEffect(() => {
  // runs once, after mount
}, []);
```

componentDidUpdate maps to useEffect with specific dependencies, since both run after updates to those values.

// Class: componentDidUpdate(prevProps) { if (prevProps.id !== this.props.id) ... }
useEffect(() => {
  // runs after mount AND after every id change
}, [id]);

componentWillUnmount maps to the function returned from useEffect.

// Class: componentWillUnmount() { this.sub.unsubscribe(); }
useEffect(() => {
  const sub = subscribe();
  return () => sub.unsubscribe();
}, []);

shouldComponentUpdate maps to wrapping the function component in React.memo.

// Class: extends React.PureComponent, or custom shouldComponentUpdate
const Row = React.memo((props) => {
  return <tr>{props.label}</tr>;
});

getDerivedStateFromProps usually maps to deriving the value directly during render instead of storing it in state.

// Class: static getDerivedStateFromProps synced state.prevId to props.id
const [prevId, setPrevId] = useState(id);
if (id !== prevId) {
  setPrevId(id);
  setSelected(null); // adjust state during render, not in an effect
}

Notes

Useful Cheatsheetsusefulcheatsheets.com

React Lifecycle

Chapter 14 · Page 102

Intermediate

React Lifecycle

(continued)

Reconciliation and Re-Renders

A parent re-rendering re-renders every child by default, even children whose props are unchanged.

// Parent state change re-renders Child even if childProp never changes
function Parent() {
  const [count, setCount] = useState(0);
  return <Child childProp="static" />;
}

React.memo skips re-rendering a function component when its props are shallowly equal to the last render.

const Child = React.memo(({ childProp }) => {
  return <div>{childProp}</div>;
}); // re-renders only when childProp's reference changes

PureComponent is the class equivalent of React.memo, shallow-comparing props and state automatically.

class Row extends React.PureComponent {
  // Automatically skips render if props/state are shallowly equal
  render() { return <tr>{this.props.label}</tr>; }
}

Changing a list item's key forces React to discard the old DOM node and lifecycle state instead of updating it in place.

// Using array index as key can cause React to reuse the wrong instance
// when items are reordered — prefer a stable id
items.map((item) => <Row key={item.id} item={item} />)

useMemo and useCallback stop new object or function references from defeating memoization on the next render.

// Without useCallback, onSave is a new function every render,
// which breaks React.memo on Child
const onSave = useCallback(() => save(id), [id]);

Notes

Useful Cheatsheetsusefulcheatsheets.com

React Lifecycle

Chapter 14 · Page 103

Intermediate

React Lifecycle

(continued)

Common Lifecycle Bugs

Calling setState synchronously inside componentDidMount triggers an extra render before the browser paints.

componentDidMount() {
  // Causes a second render right after the first — avoid when possible
  this.setState({ ready: true });
}

Updating state in componentWillUnmount or after an effect's cleanup has run logs a no-op warning.

componentWillUnmount() {
  // Warning: Can't perform a React state update on an unmounted component
  this.setState({ closed: true }); // remove this call instead
}

Child lifecycle methods fire before the parent's during mount, but the parent's fire first during unmount.

// Mount order: Child.componentDidMount, then Parent.componentDidMount
// Unmount order: Parent.componentWillUnmount, then Child.componentWillUnmount

Calling shouldComponentUpdate but forgetting to compare nested fields silently blocks needed re-renders.

shouldComponentUpdate(nextProps) {
  // Bug: compares the array reference, not its contents
  return nextProps.items !== this.props.items;
}

Mixing getDerivedStateFromProps with side effects like fetching breaks its contract — it must stay pure.

static getDerivedStateFromProps(props) {
  // Wrong: side effects don't belong here, this method must be pure
  // fetch(props.url) — move data fetching to componentDidMount/useEffect instead
  return null;
}

Notes

Useful Cheatsheetsusefulcheatsheets.com

React Lifecycle

Chapter 14 · Page 104

Intermediate

React Lifecycle

(FAQ)

FAQ

componentDidMount is a class lifecycle method that fires once after the initial render, before the browser paints in some cases. useEffect with an empty dependency array is the closest functional equivalent, but it always runs after paint, and it folds in cleanup logic that previously required a separate componentWillUnmount method.

React re-renders a component whenever its parent re-renders, regardless of whether the props look the same, unless you opt out with React.memo or shouldComponentUpdate. Object and array props that are recreated on every parent render also count as changed, because React compares references, not deep equality.

React calls componentWillUnmount (or runs effect cleanup functions) synchronously before detaching the component from the DOM. This is the only guaranteed point to cancel timers, close connections, and unsubscribe — after this, the component instance is discarded and any further state updates are ignored or warned about.

Yes — wrap function components in React.memo or extend PureComponent for class components, both of which shallow-compare props and skip rendering when nothing changed. For state-driven re-renders inside the same component, shouldComponentUpdate or splitting state into smaller, more targeted pieces avoids unnecessary work.

React 18 Strict Mode intentionally mounts, unmounts, and remounts components in development to surface lifecycle code that isn't resilient to being torn down and set up again. This double-invoke only happens in development with Strict Mode enabled — production builds run each lifecycle step once.