How to set focus after React state update/render

Question

Using functional components and Hooks in React, I'm having trouble moving focus to newly added elements. The shortest way to see this is probably the following component,

function Todos (props) {
    const addButton = React.useRef(null)
    const [todos, setTodos] = React.useState(Immutable.List([]))

    const addTodo = e => {
      setTodos(todos.push('Todo text...'))

      // AFTER THE TODO IS ADDED HERE IS WHERE I'D LIKE TO
      // THROW THE FOCUS TO THE <LI> CONTAINING THE NEW TODO
      // THIS WAY A KEYBOARD USER CAN CHOOSE WHAT TO DO WITH
      // THE NEWLY ADDED TODO
    }

    const updateTodo = (index, value) => {
      setTodos(todos.set(index, value))
    }

    const removeTodo = index => {
      setTodos(todos.delete(index))
      addButton.current.focus()
    }

    return <div>
      <button ref={addButton} onClick={addTodo}>Add todo</button>
      <ul>
        {todos.map((todo, index) => (
          <li tabIndex="0" aria-label={`Todo ${index+1} of ${todos.size}`}>
            <input type="text" value={todos[index]} onChange={e => updateTodo(index, e.target.value)}/>
            <a onClick={e => removeTodo(index)} href="#">Delete todo</a>
          </li>
        ))}
      </ul>
  </div>
}

ReactDOM.render(React.createElement(Todos, {}), document.getElementById('app'))

FYI, todos.map realistically would render a Todo component that has the ability to be selected, move up and down with a keyboard, etc… That is why I'm trying to focus the <li> and not the input within (which I realize could be done with the autoFocus attribute.

Ideally, I would be able to call setTodos and then immediately call .focus() on the new todo, but that's not possible because the new todo doesn't exist in the DOM yet because the render hasn't happened.

I think I can work around this by tracking focus via state but that would require capturing onFocus and onBlur and keeping a state variable up to date. This seems risky because focus can move so wildly with a keyboard, mouse, tap, switch, joystick, etc… The window could lose focus…

Answer 1

Use a useEffect that subscribes to updates for todos and will set the focus once that happens.

example:

useEffect(() => {
 addButton.current.focus()
}, [todos])

UPDATED ANSWER:

So, you only had a ref on the button. This doesn't give you access to the todo itself to focus it, just the addButton. I've added a currentTodo ref and it will be assigned to the last todo by default. This is just for the default rendering of having one todo and focusing the most recently added one. You'll need to figure out a way to focus the input if you want it for just a delete.

ref={index === todos.length -1 ? currentTodo : null} will assign the ref to the last item in the index, otherwise the ref is null

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

function Todos(props) {
    const currentTodo = React.useRef(null)
    const addButton = React.useRef(null)
    const [todos, setTodos] = useState([])

    useEffect(() => {
        const newTodos = [...todos];
        newTodos.push('Todo text...');
        setTodos(newTodos);

        // event listener for click
        document.addEventListener('mousedown', handleClick);

        // removal of event listener on unmount
        return () => {
            document.removeEventListener('mousedown', handleClick);
        };
    }, []);


    const handleClick = event => {
        // if there's a currentTodo and a current addButton ref
        if(currentTodo.current && addButton.current){
            // if the event target was the addButton ref (they clicked addTodo)
            if(event.target === addButton.current) {
                // select the last todo (presumably the latest)
                currentTodo.current.querySelector('input').select();
            }
        }
    }

    const addTodo = e => {
        const newTodo = [...todos];
        newTodo.push('New text...');
        setTodos(newTodo);
    }

    // this is for if you wanted to focus the last on every state change
    // useEffect(() => {
    //     // if the currentTodo ref is set
    //     if(currentTodo.current) {
    //         console.log('input', currentTodo.current.querySelector('input'));
    //         currentTodo.current.querySelector('input').select();
    //     }
    // }, [todos])

    const updateTodo = (index, value) => {
        setTodos(todos.set(index, value))
    }

    const removeTodo = index => {
        setTodos(todos.delete(index))
        currentTodo.current.focus()
    }

    return <div>
        <button onClick={addTodo} ref={addButton}>Add todo</button>
        <ul>
            {todos.length > 0 && todos.map((todo, index) => (
                <li tabIndex="0" aria-label={`Todo ${index + 1} of ${todos.length}`} key={index} ref={index === todos.length -1 ? currentTodo : null}>
                    <input type="text" value={todo} onChange={e => updateTodo(index, e.target.value)} />
                    <a onClick={e => removeTodo(index)} href="#">Delete todo</a>
                </li>
            ))}
        </ul>
    </div>
}

ReactDOM.render(React.createElement(Todos, {}), document.getElementById('root'))

Answer 2

Just simply wrap the focus() call in a setTimeout

setTimeout(() => {
  addButton.current.focus()
})