React Patterns Review — Lifting State, Composition & Memo

Lifting State Up

When two siblings need the same data, move state to their closest common parent and pass props down. Pass callbacks to update state from children.

Real-life example: Lifting state is one thermostat for two rooms — both rooms read the same temperature; one control updates both.

function App() {
  const [query, setQuery] = useState("");
  return (
    <>
      <SearchBar query={query} onChange={setQuery} />
      <ResultsList query={query} />
    </>
  );
}

Composition over inheritance

React favors composing components with props and children instead of deep class inheritance trees.

Real-life example: Composition is stacking LEGO — you rarely melt pieces together (inheritance); you snap different bricks (components).

• Small focused components
• children prop for flexible wrappers
• Render props or hooks instead of subclassing

Controlled vs uncontrolled inputs

Controlled: React state owns the value. Uncontrolled: the DOM owns it; you read with ref when needed. Prefer controlled for forms in React apps.

Real-life example: Controlled is a typed document you edit live. Uncontrolled is a paper form you only photograph at the end.

React.memo recap

React.memo wraps a component and skips re-render if props are shallow-equal. Pair with stable callbacks when needed.

Real-life example: React.memo is a "no need to repaint" sign on a wall — if nothing changed, skip the work.

import { memo } from "react";

const ExpensiveCard = memo(function ExpensiveCard({ title, onClick }) {
  return <article onClick={onClick}>{title}</article>;
});