Saltar al contenido

Cómo optimizar los componentes funcionales utilizando React.memoJan, 2ndIn Reaccionar 16,6 llegamos características más útiles uno de ellos es React.memo …

marzo 13, 2020

 En

Reaccionar 16,6 llegamos características más útiles una de ellas es la función React.memo.

React.memo es una función de orden superior que se utiliza para optimizar los componentes funcionales por poco profunda la comparación de los apoyos.

Si su componente funcional es la prestación de los mismos datos una y otra vez aprobadas por los apoyos, si pasa ese componente como un argumento para la función React.memo, impide la re-renderizado andreuse los últimos datos hechos. de

deja ver un ejemplo

function MyComponent(props) {
console.log(props);
return (

:

);
}

class App extends React.Component {
state = {
like: false
};

handleLike = () => {
this.setState({
like: true
});
};

handleUnlike = () => {
this.setState({
like: false
});
};

render() {
return (

);
}
}

En el código anterior, definimos dos componentes y el componente funcional se envuelve en el interior del componente App continuación pasamos los datos de los apoyos a dicho componente.

Cuando se hace clic en un botón como el botón o al contrario, el componente funcional está prestando una y otra vez con los mismos datos. el uso de

Sea la función React.memo () para evitar la re-la prestación de un componente.

function MyComponent(props) {
console.log(props);
return (

:

);
}

const OptimizedComponent = React.memo(MyComponent);

class App extends React.Component {
state = {
like: false
};

handleLike = () => {
this.setState({
like: true
});
};

handleUnlike = () => {
this.setState({
like: false
});
};

render() {
return (

);
}
}

Nos pasa primero nuestra MyComponent como argumento de la función React.memo entonces volvamos un componente optimizado.