Quiero renderizar el componente si sus accesorios están actualizados, otros no necesitan renderizar. Pero en mi código, puedo ver que se está procesando con un comportamiento inesperado.

Reaccionar Versión 17.XX

Vea el código a continuación

índice.js

 const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> );

archivo app.js

 import React, { useState, useCallback} from 'react' import ListItem from './ListItem' function App() { const [itemList, setItemList] = useState([]); const [counter, setCounter] = useState(0); const increase = useCallback(() => setCounter(prevState => prevState + 1), counter); return ( <div className="App"> <ListItem itemList={itemList} addItem={(val) => setItemList(prev => [...prev,val])}/> <button onClick={increase}> Increament Count </button> </div> ); } export default App;

ListItem.js

 import React, {memo} from 'react'; const ListItem = memo(props) => { console.log('listItem render...'); return ( <div>{props.itemList.map((c) => <span>{c}</span>)}</div> <button onClick={() => props.addItem(props.itemList.length + 1)}>+ Add Item</button> ) } export default ListItem;

Puede ver mi código y ahora quiero entender cómo puedo evitar una representación inesperada. Porque useCallback usando puedo evitar el reinicio de ese método. pero el componente ListItem si puede ver que se está procesando incluso si está agregando valor de contador.

Hazme saber si tienes alguna pregunta.

Gracias por la ayuda.