React.js Flashcards
What’s the difference between useEffect and useLayoutEffect? When should you use each?
Both of these can be used to basically do the same thing but they have slightly different use cases. useEffect allows you to perform side effects such as fetching data or directly updating the DOM, after a component renders.
However, if your effect is mutating the DOM and the DOM mutation will change the appearance of the DOM node between the time that it is rendered and your effect mutates it, then you’ll want to use useLayoutEffect.
How can you prevent unnecessary re-renders in functional components?
React hooks such as React.memo() or useMemo() to memoize computed values so they aren’t recalculated on every render.
Additionally, only store in useState what needs to cause a re-render, and use key props carefully and don’t use dynamic keys that change on every render unless needed.
What are the rules of hooks, and why are they important?
Don’t call Hooks inside loops, conditions, or nested functions.
Always use hooks at the top level of your React function before any early returns.
This ensures that Hooks are called in the same order each time a component renders.
How does useRef differ from useState? What are common use cases?
useState causes re-render, useRef does not.
If your variable is something that decides a view layer render, use useState, otherwise use useRef.
How can you mimic componentDidMount, componentDidUpdate, and componentWillUnmount with hooks?
useEffect can emulate the same behaviour.
What’s the difference between controlled and uncontrolled components in forms?
In most cases, we use controlled components to implement forms.
In a controlled component, form data is handled by a React compenent. In an uncontrolled component, form data is handled by the DOM itself.
How do you lift state up in React, and when should you do it?
When multiple components need to reflect the same changing data, so we lift the shared state to their closest comment ancestor.
What are compound components in React and how are they built?
Compound components exist by having two or more components work together to achieve a useful task.
Typically, one component is a parent and the other is a child.
The objective is to provide a more expressive and flexible API.
How would you structure a large-scale React application?
By following a modular approach.
This means breadking down the application into smaller, manageable components.
What are some strategies to manage deeply nested component trees?
Deeply nested component trees often result from overly rigid hierarchies. Instead of nesting components directly inside each other, consider passing components as props or composing them using layout or slot-based patterns.
This reduces the visual and logical depth of the tree and improves readability.
When should you use Context API vs Redux/Zustand/Recoil?
Context API is great for simple, low-frequency, app-wide state; for more complex or performance-sensitive needs, tools like Redux, Zustand, or Recoil are better suited.
How does React’s useReducer hook work, and when should you prefer it over useState?
Both useState and useReducer are React hooks used to manage state within functional components, but they differ in their approach to state updates.
useState is simpler for basic state management where updates are straightforward, while useReducer is better suited for more complex state logic, especially when dealing with multiple sub-values or when the next state depends on the previous state.
What are the downsides of using Context for frequent state updates?
Using Context for frequent state updates causes all consuming components to re-render on every change, even if they only use part of the state. This leads to performance issues, especially in large or deeply nested trees.
Context lacks built-in selectors or fine-grained subscriptions, making it harder to optimize or scale for high-frequency updates.
How would you persist state across sessions in a React app?
To persist state across sessions in a React app, you can store it in localStorage, sessionStorage, or IndexedDB, and then restore it when the app initializes.
A common pattern is to sync React state with localStorage using useEffect and useState. For more complex apps, libraries like Redux Persist, Zustand with middleware, or React Query with hydration provide more structured and scalable solutions.
How can you implement global state without external libraries?
You can implement global state in React without external libraries by using the Context API combined with useReducer or useState.
Create a context, wrap your app in a provider component, and manage shared state inside that provider. Components can then access and update the state using useContext, making it available app-wide without prop drilling.
What is React.memo and how does it help with performance?
React.memo is a higher-order component that memoizes a functional component—meaning it prevents unnecessary re-renders if the component’s props haven’t changed. It works by doing a shallow comparison of the props and only re-rendering if there’s a difference.
This helps improve performance in components that receive the same props frequently, especially in large or complex UIs.
What is the purpose of useCallback and useMemo, and when should you avoid them?
useCallback and useMemo are React hooks used to optimize performance by memoizing functions and values between renders.
useCallback(fn, deps) returns a memoized function—use it to prevent unnecessary re-creations of a function passed as a prop. useMemo(fn, deps) returns a memoized value—use it to avoid recalculating expensive computations on every render.
When to Avoid:
Avoid them if the function or value is cheap to compute or the component doesn’t re-render frequently. Overusing them can actually add complexity and hurt performance due to the cost of maintaining the memoization itself. Use them only when profiling shows that unnecessary re-renders or recalculations are a real issue.
How do you profile performance in a React app?
You can profile a React app using the React DevTools Profiler, which shows which components rendered, how long they took, and why they re-rendered. Tools like why-did-you-render help detect unnecessary renders, and browser dev tools can benchmark custom logic.
Profiling helps identify real performance issues before applying optimizations like memoization.
What are the main causes of performance bottlenecks in React apps?
The main causes of performance bottlenecks in React apps include unnecessary re-renders, especially from changing props or state that trigger updates across many components.
Large component trees, expensive calculations during rendering, and frequent updates (like animations or input handling) can also slow things down.
Poorly managed global state or overuse of context in high-frequency scenarios can make the problem worse.
How does reconciliation work in React, and how can you optimize it?
Reconciliation in React is the process of comparing the current virtual DOM with the previous one to determine the minimal set of changes needed to update the real DOM efficiently. React uses a diffing algorithm that compares elements by type and key; if something has changed, it updates only that part of the DOM.
To optimize reconciliation:
Use stable key props in lists to help React track elements accurately. Avoid unnecessary re-renders with React.memo, useMemo, and useCallback. Split large components into smaller ones to limit the scope of re-renders and improve diffing efficiency.
How would you handle loading, error, and success states in data fetching?
To handle loading, error, and success states in data fetching in React, you can use useState for managing the states and useEffect to trigger the data fetching process. Here’s a typical pattern:
Loading state: Set an initial state to true when starting the request. Success state: Update the state with the fetched data once the request is successful. Error state: Catch errors and store the error message or object.
What’s the best way to cancel an ongoing API request in a component?
The best way to cancel an ongoing API request in a React component is to use an abort controller (via the AbortController API) within the useEffect hook. This allows you to cancel the request if the component unmounts or if you need to stop the request before completion (e.g., when navigating away from the page).
Key Steps:
AbortController: Creates a controller that can signal the fetch request to abort. Signal: Passed to the fetch API to associate it with the controller. Cleanup: Inside the useEffect cleanup function, we call controller.abort() to cancel the request if the component is unmounted.
This ensures that if the component is unmounted before the fetch completes, the request will be canceled, preventing potential memory leaks or errors.
How does React Query / SWR improve the data fetching experience?
- React Query is a feature-rich solution for managing server state with caching and syncing capabilities.
- SWR is a simpler library focused on fast and efficient data fetching with caching and background revalidation.
React Query and SWR simplify data fetching by automatically caching responses, reducing redundant API calls and improving performance. They handle background refetching to ensure data is always up-to-date without manual intervention. Both libraries provide built-in error handling and retries, making API requests more reliable.
They also offer efficient solutions for managing server state, like pagination and infinite scrolling, reducing the need for custom state management.
How can you debounce or throttle API calls in React?
To debounce API calls in React, use lodash.debounce or setTimeout to delay the API request until the user stops interacting for a specified time.
Throttling can be done using lodash.throttle or setInterval to limit API calls to a certain frequency, regardless of user actions.
Both methods improve performance by reducing unnecessary requests during frequent user interactions, like typing or scrolling.
