Warning: findDOMNode is deprecated in StrictMode - React

Sergio S.

13/08/2021

Al estar trabajando con ReactJS me encontré con el siguiente Warning en consola que me causaba duda de que saliera tan continuamente en el desarrollo de un proyecto, he aquí el mensaje completo que me arrojaba:

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference.

Investigando sobre esta advertencia, es que al parecer las últimas versiones de create-react-app agregan una funcionalidad llamada StrictMode en el archivo tu-proyecto\src\index.js de tu aplicación.

Dentro de las soluciones que pude hallar para resolver este Warning fue quitar la etiqueta <React.StrictMode> dentro del archivo tu-proyecto\src\index.js y efectivamente funciona bien, pero a mi consideración no creo que sea la solución más optima el quitar la mencionada etiqueta.

Así que siguiendo leyendo e investigando el como resolverlo llegue a esto que aquí menciono de como quitar dicho mensaje de advertencia.

En mi caso este Warning salia cuando un componente cuya funcionalidad es el crear un nuevo proyecto, este componente al crear un proyecto llamar a otro componente para mostrar un listado de todos proyectos que se han creado para con esto refrescar el listado de los proyectos que se visualizan y por lógica que el proyecto recién creado se muestre también en dicha lista, pues bien justo aquí es cuando me muestra en consola el Warning: findDOMNode is deprecated in StrictMode.

Así que resumiendo a la solución que llegue es que en mi archivo llamado "ListProjects.js" que es el componente que imprime el listado de los proyectos, realicemos lo siguiente para corregir y quitar el Warning:

Pasos a seguir para corregir Warning: findDOMNode is deprecated in StrictMode

1.- Importar el hook useRef:

import { useContext, useEffect, useRef } from 'react';

2.- Al principio del Stateless Function Component que yo le llame ListProjects() agregar la siguiente linea, haciendo uso del hook useRef que se importo:

const ListadoProyectos = () => {
    const nodeRef = useRef(null);//Hacemos uso del hook useRef para quitar Warning findDOMNode 

3.- Y por último en el return() del Stateless Function Component del archivo ListProjects() agregar solo la siguiente linea nodeRef={nodeRef} como se muestra a continuación (las demás lineas solo son para dar una mejor idea de donde lo coloque):

return (
   <ul className="list-projects">
      {projects.map(project => (
         /* El componente CSSTransition realiza un animación de una transicion */
         <CSSTransition
            nodeRef={nodeRef}/* Requerido para quitar el Warning: findDOMNode is deprecated in StrictMode. */

Si desean más información sobre StrictMode o Modo estricto en ReactJS, sobre las comprobaciones hechas por el modo estricto que solamente son ejecutadas en el modo de desarrollo; y que según la documentación oficial no van a impactar en producción, puedes revisar los siguiente enlaces:

StrictMode (Modo estricto) documentación oficial

Referencias y el DOM documentación oficial

Lo más seguro es que con las futuras actualizaciones del create-react-app se corrija el Warning: findDOMNode is deprecated in StrictMode, pero mientras eso esto sucede espero que la información y la solución dada aquí sea de utilidad para posibles proyectos donde de seguro les saldrá esta advertencia, también si acaso conocen alguna otra forma de corregirlo les agradecería nos compartan su experiencia, y no olvidarnos el seguirnos cuidando ante esta pandemia que parece que se va pero que aun no termina y quien sabe hasta cuando. ¬¬