Lo explicaré con comentarios en código.
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> function TableComponent(props){ const checkboxSearch = () => { let tempVar = [[1,2,3],[3,2,1],[4,5,6]]; //containerID = index of chosen array const container = document.getElementById("optionsContainer_"+containerID); if (searchValue === " ") { setUniques(props.unique); } const results = props.unique[containerID].filter((item) => { if (item) { if (typeof item !== "number") { return item.toLowerCase().indexOf(searchValue.toLowerCase()) > -1; } else { return ( item.toString().indexOf(searchValue.toString().toLowerCase()) > -1 ); } } return null; }); tempVar[containerID] = results; setUniques(tempVar); }; return( uniques.map((item,index) => { <child data={item} key={index}/> }) }y ahora componente hijo:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> function TableHead(props) { return ( <div id={props.keys[props.index]} className="optionsContainer"> {props.unique.map((item, key) => { return ( <label key={key}> <input type="checkbox" value={item ? item : "empty"} /> <p> {item.toFixed(2)} </p> </label> ); })} </div> ); }cuando uno de los elementos de las matrices cambia, vuelve a renderizar todo nuevamente, y tengo más de 40k datos y estoy usando este método en el detector de eventos de entrada, por lo que es realmente lento ... ¿alguna sugerencia sobre cómo manejar esto?