Build Resizable Panels with useResizable Hook

Question

Accepted Answer

**Requirements**
- Two panels side-by-side with a draggable divider (8px handle).
- Drag to resize; respect `min`/`max` widths (e.g. 200–600px); persist to localStorage.
- Handle supports mouse, touch, and keyboard (ArrowLeft/Right 10px).
- Hook API: `const { size, handleProps } = useResizable({ initial: 320, min: 200, max: 600 })`.

**Architecture**
- `useResizable` stores `size` in state; on `pointerdown`, capture pointer, add `pointermove` listener on window to compute `newSize = startSize + (clientX - startX)`, clamp, update.
- Use `pointer` events (not mouse) for touch+pen; set `touch-action: none`.
- Persist: `useEffect(() => localStorage.setItem(key, size), [size])`.

**What interviewers look for:** pointer capture, window-level move listener, clamp, rAF throttling, keyboard a11y, reusable hook design.

**Reference implementation**
```jsx
function useResizable({ initial = 300, min = 200, max = 600, storageKey } = {}) {
  const [size, setSize] = React.useState(() => {
    const v

Build Resizable Panels with useResizable Hook

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THE
STREAK ALIVE.

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THESTREAK ALIVE.

KEEP THE
STREAK ALIVE.