Controlled Components

const [value, setValue] = useState("");

<input value={value} onChange={e => setValue(e.target.value)} />

A controlled component is one where form data is handled by React state.

✅ Best for complex forms

Uncontrolled Components

const inputRef = useRef();

<input ref={inputRef} />

An uncontrolled component lets the DOM handle its own state.

✅ Simpler for quick forms

Pure Component

const MyComponent = React.memo(function MyComponent(props) {
  return <div>{props.name}</div>;
});

A Pure Component renders the same output when given the same props and state.

🎯 Use Pure Components to improve performance by avoiding redundant rendering.

Higher-Order Component (HOC)?

Example

const withLogger = (WrappedComponent) => {
  return (props) => {
    console.log("Rendering", WrappedComponent.name);
    return <WrappedComponent {...props} />;
  };
};

A Higher-Order Component (HOC) is a function that takes a component and returns a new component with enhanced behavior.

Why use HOCs?

• Code reuse
• Cross-cutting concerns (auth, logging, permissions)
• Keeps components clean

⚠️ Today, many HOC use cases are replaced by custom hooks, but HOCs are still common in libraries.