React Intermediate Flashcards
(20 cards)
What are React hooks?
Functions that let functional components use state and lifecycle features (e.g.
What problem does useEffect solve compared to class lifecycle methods?
It allows side effects (like API calls) in functional components
How can you optimize performance in a React application?
By using memoization (React.memo
What is React.memo and how does it work?
A higher-order component that memoizes functional components to avoid unnecessary re-renders if props haven’t changed.
What is the purpose of useMemo?
To memoize the result of a computation so it’s only recalculated when dependencies change.
What is the purpose of useCallback?
To memoize a function reference so it doesn’t get redefined on every render unless dependencies change.
How does context API work in React?
It allows you to pass global data (like themes or user info) without prop drilling through many layers.
What is prop drilling and how can it be avoided?
Passing props through multiple levels unnecessarily; useContext or state management libraries can help avoid it.
What are controlled vs uncontrolled inputs?
Controlled inputs are managed by React state; uncontrolled inputs use refs and native DOM state.
How do you implement error boundaries in React?
By creating a class component with componentDidCatch and getDerivedStateFromError methods to catch and display errors.
What is lazy loading in React?
A technique to load components only when they are needed
What is code splitting?
Breaking the app into smaller bundles so parts are only loaded when needed
What is the difference between useEffect and useLayoutEffect?
useLayoutEffect runs synchronously after render but before paint; useEffect runs asynchronously after paint.
What is a custom hook in React?
A reusable function that starts with “use” and abstracts shared logic using other hooks.
How do you prevent unnecessary re-renders in child components?
Use React.memo
What is reconciliation in React?
The process of comparing the virtual DOM with the previous one and updating only the parts that changed.
What happens if you call setState in useEffect without dependencies?
It causes an infinite loop because the effect runs after every render and updates state.
How do you fetch data in a React component safely?
Use useEffect to call an async function
How do you manage forms with complex validation in React?
Use libraries like Formik or React Hook Form
How do portals work in React?
They allow rendering children into a different part of the DOM
