Interview question

How do you optimize component re-renders? Component re-renders को कैसे optimize करते हैं?

Answer

// 1. React.memo - prevent unnecessary re-renders
const MyComponent = React.memo(({ name }) => {
  return <h1>Hello {name}</h1>;
});

// 2. useMemo - memoize expensive computations
function Component({ items }) {
  const sortedItems = useMemo(
    () => items.sort((a, b) => a.value - b.value),
    [items]
  );
  return <ul>{sortedItems.map(item => <li key={item.id}>{item.name}</li>)}</ul>;
}

// 3. useCallback - memoize functions
function Parent() {
  const handleClick = useCallback(() => {
    console.log('Clicked');
  }, []);
  
  return <Child onClick={handleClick} />;
}

// 4. Code splitting with React.lazy
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

Optimization techniques:
1. React.memo - unnecessary re-renders prevent करो
2. useMemo - expensive computations memoize करो
3. useCallback - functions memoize करो
4. Code splitting - lazy loading
5. Suspense - async components

Was this answer clear?

Subjects

Related questions