React

React.memo

const Greeting = ({ name }) => <div>Hello, {name}</div>
const MemoizedGreeting = React.memo(Greeting)

When a component is wrapped in React.memo(), React renders the component and memoizes the result. Before the next render, if the new props are the same, React reuses the memoized result skipping the next rendering.

useMemo vs useCallback

const memoizedResult = useMemo(compute, dependencies);
const memoizedResult = useCallback(callback, dependencies);

• useMemo and useCallback remember something between renders until the dependancies change, the difference is just what they remember.
• useMemo is similar to useCallback except it allows you to apply memoization to any value type (not just functions).
• useMemo will remember the returned value from the function.
• useCallback will remember the actual function.

Controlled Component vs Uncontrolled Component

A Controlled Component is one that takes its current value through props and notifies changes through callbacks like onChange. A parent component "controls" it by handling the callback and managing its own state and passing the new values as props to the controlled component. You could also call this a "dumb component". A Uncontrolled Component is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML. Most native React form components support both controlled and uncontrolled usage:

// Controlled:
<input type="text" value={value} onChange={handleChange} />

// Uncontrolled:
<input type="text" defaultValue="foo" ref={inputRef} />
// Use `inputRef.current.value` to read the current value of <input>

In most (or all) cases you should use controlled components.

source: stackoverflow