Estoy escribiendo una aplicación algo compleja con React y Redux, y tengo una situación en la que hacer clic en un botón envía una acción que crea un nuevo elemento DOM en una parte completamente diferente de la aplicación y quiero que este nuevo elemento DOM esté enfocado. Me pregunto cuál es la mejor manera de hacerlo.

Me las arreglé para que funcione así:

 const handleClick = () => { ReactDOM.flushSync(() => { dispatch(createNewElement(id)); }); document.getElementById(id).focus(); };

Estoy usando identificaciones de DOM regulares para identificar el elemento para enfocar y la función flushSync (casi sin documentar) para asegurarme de que esté realmente presente en el DOM al seleccionarlo.

No puedo usar referencias porque el nuevo elemento está en un componente completamente diferente. No puedo usar autoFocus porque esos elementos también se pueden crear de formas que no deberían enfocarse automáticamente y no quiero que mi HTML se llene de enfoques automáticos obsoletos. No quiero poner el estado enfocado en la tienda Redux porque será una pesadilla mantenerlo correctamente.

En lugar de flushSync , también podría envolver el .focus en un setTimeout(…, 0) . Parece funcionar, pero no estoy completamente convencido de que el elemento esté garantizado para cuando se agote el tiempo de espera (a diferencia de flushSync ).

¿Es este un uso legítimo de ReactDOM.flushSync ? ¿Hay otra forma más sencilla de hacerlo?