Forzar un render en React es una estrategia muy útil para definir la ejecución de acciones en un momento determinado del ciclo de vida de nuestro componente. Esta estrategia también nos permite actualizar datos en un componente y pintar los nuevos datos en pantalla. Por ello, en este post, te enseñaremos exactamente cómo forzar un render en React para controlar la ejecución de acciones.
¿Cómo forzar un render en React?
En nuestro post sobre el estado en React, puedes leer que la manera fundamental que tenemos para forzar un render en React es crear un estado. Es decir, si queremos que un componente se renderice de nuevo, debemos encontrar una forma de crearle un estado. ¿Por qué? Pues porque sabemos que cuando modifiquemos el estado interno del componente, este se renderizará automáticamente.
Entonces, utilizaremos el siguiente componente de ejemplo para aprender a forzar un render en React. En este componente llamado TweetsPage, hemos definido una función en la que se recorren los objetos del array tweets con el método map de JavaScript. Este método convierte cada uno de estos objetos en un elemento de lista y nos los devuelve en un nuevo array. A continuación, te mostramos las líneas de código que manipularemos:
const TweetPage = ( ) => (
<div className = “tweetsPage”>
<ul>
{tweets.map (tweet => (
<li key = {tweet.id}> {tweet.content}</li>
))}
</ul>
</div>
);
Entonces, para definir un estado utilizamos el comando useState de React. Recuerda que un estado es un tipo de dato de React que se modifica constantemente. Para forzar un render en React, el contenido de este estado poco importa. Sin embargo, nosotros definiremos que este estado almacenará los tweets que recibamos de la API. Entonces, dentro de los corchetes de nuestro estado llamamos al objeto tweets.
Un estado también nos devuelve una función useState, con la que se manejan y modifican estos datos. En nuestro caso, llamaremos a esta función setTweets. Hasta ahora, esto se ve así:
const [tweets, setTweets] = useState ();
Luego, definiremos el punto de inicialización del estado dentro del paréntesis de useState. Te recomendamos pensar muy bien qué dato usarás para inicializar esta función, pues nuestro componente se renderizará una primera vez con el estado inicial que definamos.
Después de este primer render, podremos meter nuestros efectos y ejecutar distintas acciones. En nuestro caso, esta acción será llamar a la API. Dentro de la respuesta de esta acción definiremos que el componente coja los tweets de la API y los meta dentro del estado. Ya que esta acción modifica el estado, podremos forzar un render en React.
Entonces, en nuestro caso definiremos que el dato que inicializa nuestro estado es un array vacío. Esto se debe a que el resto de nuestro componente depende de la función map, que manipula un array. Por ello, es el dato ideal para inicializar nuestro estado. A continuación, puedes ver la línea de código final:
const [tweets, setTweets] = useState ([]);
Ahora que sabes cómo forzar un render en React, ¡es la ocasión de utilizarlo en tus propios proyectos! Si quieres saber más sobre cómo desarrollar proyectos de programación en el ámbito web, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás lenguajes y herramientas como JavaScript, React, Axios, CSS y HTML en muy pocos meses. ¡Matricúlate ya y conviértete en un experto dentro del sector!
