Tengo un controlador de clasificación definido así:
const onSortHandler = useCallback((property: string, direction: string) => { setTodoList([...todoList.sort(/**<sort function snipped>**/)]); }, [todoList]);Esta función se transmite a un componente secundario donde tengo algo como:
const [sort, setSort] = useState<{ name: string | undefined, direction: string | undefined }>({ name: 'id', direction: 'asc' }) useEffect(() => { onSortHandler(sort.name, sort.direction); }, [sort, onSortHandler]); La idea es que cada vez que alguien cambie la propiedad y la dirección de ordenación, activé una nueva ordenación y esparcir el nuevo objeto en setTodoList provoca una nueva representación.
Ahora bien, esto funciona bien, pero eslint me dijo que debería agregar onSortHandler a la matriz de dependencias useEffect , lo cual hice, y causó una gran cantidad de renderizaciones, así que seguí su consejo y agregué useCallback a la mezcla.
Obtengo una gran cantidad de renderizaciones, lo que hace que la funcionalidad de clasificación no funcione. Si onSortHandler de la matriz de dependencias useEffect , funciona bien, pero recibo la advertencia de eslint que me gustaría ordenar.
Sé que es la propagación la que causa el problema, ya que si lo elimino, el problema desaparece (pero luego la lista nunca se vuelve a mostrar en un nuevo tipo, lo cual es otro problema).
Haga onSortHandler estable (lo que significa que nunca cambia) como:
const onSortHandler = useCallback((property: string, direction: string) => { // use functional state update: setTodoList(current => current.slice().sort(/**<sort function snipped>**/)); }, []); // < no dependenciesEsto le permite usarlo como una dependencia donde sea necesario sin que realmente active ningún efecto de actualización.
Nota : cambié la extensión a slice (haga una copia primero), porque usar .sort en current (o todoList en su código) sigue siendo una manipulación de estado, ya que sort ordena en su lugar .