React Warning: Cannot update a component from inside the function body of a different component

Pedro Lara

A partir de la versión v16.13.0 de React, cuando se intenta actualizar un Hook de un componente desde el interior de otro nos muestra este warning: Warning: Cannot update a component from inside the function body of a different component

En mi caso particular, el error me aparece al intentar realizar el siguiente proceso:

Tengo un componente funcional que implementa un ListItem, si el usuario hace clic en este elemento debe llamar una función que muestra un console.log y actualiza un Hook useState. Sin embargo, esto no sucede, al contrario, me muestra el warning ya mencionado y no me actualiza el useState:

Aquí enlace el componente

import React, {useState} from 'react';

import { ListItem,Icon} from 'react-native-elements'

import { Alert, Modal, StyleSheet, Text, Pressable, View } from "react-native";

 

 

 

const OptionsAccount = ()=>{

   

    const [showModal, setShowModal] = useState(null)

    const [redeCompoenent, setRenderComponenet] = useState(null)

   

   

    const generateOptions =()=>{

        return =[

          {title: "Cambiar Nombre"

          iconNameLeft:"account-circle"

          iconColorLeft:"#DAF7A6"

          iconNameRight:"chevron-right"

          iconColorRight:"#DAF7A6"

          onPress: ()=>selectedComponent("name")

          },

          {title: "Cambiar Email"

          iconNameLeft:"account-circle"

          iconColorLeft:"#DAF7A6"

          iconNameRight:"chevron-right"

          iconColorRight:"#DAF7A6"

          onPress: ()=>selectedComponent("email")

          },

            {title: "Cambiar Password"

          iconNameLeft:"account-circle"

          iconColorLeft:"#DAF7A6"

          iconNameRight:"chevron-right"

          iconColorRight:"#DAF7A6"

          onPress: ()=>selectedComponent("password")

          }

           

        ]

    }

   

   

    const selectedComponenet = (key)=>{

         console.log(key)

       

        setShowModal(true)

    }

   

    const menuOptions = generateOptions();

    return(

   

    

          {

            list.map(menuOptions, (menu, index) => (

              

                

               

                

                  {menu.title}

                

       

                

               

              

            ))

          }

 

    

        

        Modal    

   

    )   

} 

const styles = StyleSheet.create({
   

}) 

export default OptionsAccount; 
 

Esto es estraño porque parecería que ahora no se puede realizar algo que hemos estado haciendo desde hace mucho tiempo, que además fue recomendado por el equipo de React.

He encontrado mucha información sobre este error, pero muy confusa y las soluciones que ofrecen no fueron efectivas en mi caso, por ejemplo, en https://flaviocopes.com/react-update-while-rendering-different-component/ dicen que colocando un Hook useEffect resuelve el problema, sin embargo, en mi caso no funcionó.

En este otro hilo se generó un acalorado debate en el que incluso intervino Dan Abramov creador de Redux. Pero, no ofrecen una solución efectiva en mi caso: https://github.com/facebook/react/issues/18178

En febrero del 2020 el equipo de React anunció sobre algunas advertencias que se presentarían en la versión 16.13.0: https://reactjs.org/blog/2020/02/26/react-v16.13.0.html

En mi caso, para resolver el problema,  procedí a pasarle el Hook setRednerComponent a la función selectedComponent:

onPress: ()=>selectedComponent("displayName", setRenderComponent )