Estoy tratando de volver a renderizar solo cuando los minutos cambian usando React.memo() así:
function getCurrentTime(){ let now = new Date(); return ({ 'mins': now.getMinutes(), 'secs': now.getSeconds() }) } const Disp = React.memo(({ timeObj }) => { //this Component is suppose to be in another file return (<Text>{timeObj['mins']}</Text>); }, (prevProp, newProp) => { if (prevProp['mins'] == newProp['mins']) return false; return true; }); export default function App() { const [CurrentTime, setCurrentTime] = useState(() => getCurrentTime()); useEffect(() => { let secTimer = setInterval(() => {setCurrentTime(getCurrentTime())}, 500); return () => { clearInterval(secTimer) }; }, []); return ( <View style={styles.body}> <Disp timeObj={CurrentTime} /> </View> ); } pero por alguna razón no funciona y se procesa cada 500 ms
he seguido este tutorial
Tiene sus valores de retorno al revés en su función de comparación. De la documentación (en un comentario en el ejemplo de código):
devolver verdadero si pasar nextProps para renderizar arrojaría el mismo resultado que pasar prevProps para renderizar, de lo contrario devolvería false
Estás haciendo lo contrario, devolviendo false cuando los minutos son los mismos.
Además, te estás perdiendo la parte timeObj (¡gracias Felix!), Debería ser prevProps.timeObj.mins (y lo mismo para newProps ). (Además, "props" debe estar en plural y, en general, es mejor escribir .mins en lugar de ['mins'] ).
En cambio:
const Disp = React.memo( ({ timeObj }) => { //this Component is supposed to be in another file return (<Text>{timeObj.mins}</Text>); }, (prevProps, newProps) => { // Return true if the props are the same for rendering purposes, // false if they aren't return prevProps.timeObj.mins == newProps.timeObj.mins; } ); Como nota al margen, puede usar la desestructuración anidada si todo lo que desea son los mins de timeObj (puede hacerlo tanto en el componente como en la función de comparación, pero probablemente solo lo haría en el componente, se vuelve confuso hacer el cambio de nombre necesario):
const Disp = React.memo( ({ timeObj: { mins } }) => { //this Component is supposed to be in another file return (<Text>{mins}</Text>); }, (prevProps, newProps) => { // Return true if the props are the same for rendering purposes, // false if they aren't return prevProps.timeObj.mins == newProps.timeObj.mins; } );