Intermediate React

What is prop drilling?

passing data (props) down through multiple levels of nested components to reach a deeply nested component that needs the data.

How would you fetch data in a React component, and how do you handle loading and error states?

To fetch data in a React component, you typically use the useEffect hook for side effects and useState to manage the data, loading, and error states.

Why use cleanup functions in useEffects?

To prevent memory leaks (like with timer & event listeners) & clean up side effects (ubsubscribe from a data stream)

Explanation

What causes a component to re-render?

  • if state or props change
  • its parent re-renders
  • A context value it consumes changes
Explanation

What is suspense in React?

Suspense lets you lazy-load components or data and shows a fallback while it's loading

Explanation

How does React.memo work

React.memo is a HOC that prevents functional components from re-rendering unless their props change. Useful for performance optimization.

Explanation

Intermediate Hooks

What is the useContext hook?

useContext is a React Hook that lets you read and subscribe to context from your component. It lets you access data without prop drilling

Explanation

What is the useCallback hook?

A hook that returns a memoized version of a function, useful for preventing unnecessary re-renders of child components.

Explanation

What is the useMemo hook?

Used to memoize (remember) the result of a calculation so it doesn’t run again unless inputs change.

Explanation

what is the useLayoutEffect hook?

Like useEffect but fires before the screen paints. Useful for measuring layout

Explanation

What is the difference between useMemo & useCallback?

useMemo caches the return value of a function. useCallback caches the function definition itself.

Explanation
Homepage