React; Keep focus in input when state change

Question

I am writing an editor where I would like to be notified for any change into the document. So I created a tree of components where each node report to the parent via a onChange(..) callback:

// Pseudo structure.
Root {
    const [changed, setChanged] = useState(true)
    function onChange(..) {
      setChanged(true);
    }

    return (
        <App>
          <Status saved={!changed} />
          <Editor onChange={onChange}>
            <Text onChange={onChange} />
            <Image onChange={onChange} />
          </Editor>
        </App>
    );
}

Now I have to create a <Table> component where each cell is an editable input that trigger the onChange callback. Because of the useState in Root , each time we change one letter in the table, the whole structure is rendered.

But the rendering cause a loose of the focus, which is admittedly annoying to type a text. My current solution is to save the current cell via useMemo in my new Table component and request the focus when the component is rendered. However, I still loose the caret position and I have the feeling this is a hacky way of working (That's why I am reaching you).

How can I notify a change and update the state of my Root without losing the focus from one input ?

Thanks

Answer 1

My suggestion

1. Keep stateless components as child.
2. Use keys for each cell to avoid unnecessary rerendering from parent.