React

Hoe optimaliseer je React performance?

React.memo, useMemo, useCallback voorkomi unnecessary re-renders.

Home/Categorieën/React/Hoe optimaliseer je React performance?

Optimization techn

React.memo: wrap component, skip re-render als props equal useMemo: cache computed value useCallback: cache functie referentie

Code Voorbeelden

JAVASCRIPTPerformance optimization
const UserCard = React.memo(({ user }) => {
  return <div>{user.name}</div>;
});

function Parent() {
  const [count, setCount] = useState(0);
  
  const memoizedUser = useMemo(() => ({ name: 'Jan' }), []);
  const handleClick = useCallback(() => setCount(c => c + 1), []);
  
  return <UserCard user={memoizedUser} onClick={handleClick} />;
}

Relevante trefwoorden

React.memouseMemouseCallback
← Terug naar ReactAlle categorieën →