React: how to set focus on last input after adding it?

Question

can you please help me figure out how to set focus on last input after adding it by click on button?

function InputList() {
  const [items, setItems] = useState([]);
  const add = useCallback(() => setItems([...items, {id: uniqId()}]), [items]);

  return (
    <div>
      {items.map(item => <input key={item.id}/>)}
      <button onClick={add} type="button">Add</button>
    </div>
  );
}

Answer 1

easiest way is to pass the same ref to all the inputs:

const refToLast = React.createRef();
useEffect(() => {
  refToLast.current.focus();
});
...
      {items.map(item => <input ref={refToLast} key={item.id}/>)}
...

But we may found that we setting focus to last input on each re-rendering(even when we type some value). So we may add condition to set focus only when items.length is changed:

useEffect(() => {
  refToLast.current.focus();
}, [items.length]);

But that would also run when we remove entry not adding them. Not sure if that's desired.

[upd] to skip setting focus on initial rendering we can add additional flag:

const doSetAutoFocus = useRef(false);

useEffect(() => {
  refToLast.current.focus();
}, [items.length, doSetAutoFocus]);

const onAddClicked = useCallback(() => {
  add();
  doSetAutoFocus.current = true;
}, [add])