إدارة التركيز باستخدام Refs وuseEffect

When UI appears, disappears, or updates, the keyboard focus can land in the wrong place or vanish. In React you steer it deliberately with refs and effects.

useRef gives you a stable handle to a real element. After render, ref.current is the actual DOM node you can call .focus() on.

Focus must happen once the element exists in the DOM. useEffect runs after the browser paints, so it is the safe place to move focus.

An empty dependency array means the effect runs once when the component mounts. Use this to put focus on the first field of a form or step.

Add a dependency like isOpen so the effect re-runs when state flips. When a panel opens, you can move focus straight into it.

A ref can be null if the node is not rendered yet. Check ref.current exists before calling .focus() to avoid a crash on a missing element.

Headings and divs are not focusable by default. Add tabindex of -1 so script can focus them without adding them to the natural tab order.

An effect can return a cleanup function. Use it to send focus back to the trigger when a layer unmounts, so users are not dropped at the page top.

An effect captures values from its render. If you focus based on data, list it in the dependency array so the effect uses fresh values, not stale ones.

To focus an element inside a child component, wrap it in forwardRef. The parent then holds a ref to the inner node and can focus it.

Move focus only when it truly helps the user, like opening a dialog or showing an error. Grabbing focus on every render frustrates everyone.

You want to move keyboard focus to an element right after React renders it. Where does that belong?

Pair a useRef with a useEffect to move focus after render. Guard against null, restore focus on cleanup, and only steer focus when it helps. 🎯