Explain that useState is a React Hook that lets you add state to functional components, and that state persists across re-renders because React stores it internally. Describe how React tracks state by the order of Hook calls and how updates trigger re-renders with the new state value.
Pro tip: Mention that state updates are asynchronous and batched, and that using the functional update form (e.g., setCount(prev => prev + 1)) ensures you work with the latest state, which is crucial in scenarios with rapid updates.
Explain that useState is a Hook that returns a stateful value and a function to update it, enabling functional components to have local state.
Describe how React preserves state between re-renders by storing it in the component's fiber node, and that the state value is not reset unless the component unmounts or the Hook order changes.
Explain that calling the setter function schedules a re-render, and React will re-render the component with the new state value, updating the UI accordingly.
Discuss that state updates may be batched for performance, and that the new state is not immediately available after calling the setter, so use the functional update form when relying on previous state.
Emphasize that Hooks must be called in the same order on every render, as React relies on call order to associate state with the correct Hook.
AI-generated suggestions, not part of the candidate's original notes. May be inaccurate — verify before relying on them.
Start by explaining the purpose of useEffect (side effects in function components) and its basic syntax. Then, detail how the dependency array controls when the effect runs, and how the cleanup function prevents memory leaks. Finally, discuss common mistakes and how to avoid them, emphasizing best practices.
Pro tip: Emphasize that useEffect is not a lifecycle method replacement but a synchronization mechanism, and highlight the importance of correctly specifying dependencies to avoid stale closures and unnecessary re-renders.
Describe useEffect as a hook for performing side effects in function components, such as data fetching, subscriptions, or manual DOM manipulations. Mention that it runs after render.
Explain that the dependency array determines when the effect re-runs: empty array means run once on mount, no array means run after every render, and with dependencies means run when any dependency changes.
Explain that the cleanup function is returned from the effect and runs before the component unmounts or before the next effect execution. It's used to cancel subscriptions, clear timers, etc.
List common pitfalls: missing dependencies causing stale data, over-specifying dependencies causing infinite loops, not cleaning up leading to memory leaks, and misunderstanding when effects run.
Suggest using the exhaustive-deps ESLint rule, separating concerns into multiple effects, and using useCallback/useMemo for stable dependencies when needed.
AI-generated suggestions, not part of the candidate's original notes. May be inaccurate — verify before relying on them.
Start by defining what useMemo and useCallback do—memoizing values and functions respectively—and clarify that they are performance optimizations, not semantic guarantees. Then explain the conditions under which they help (expensive computations, referential stability for memoized children) and when they hurt (trivial computations, added memory and comparison overhead). Conclude with a practical rule: measure first, optimize only when profiling shows a bottleneck.
Pro tip: Emphasize that premature memoization often adds complexity without measurable benefit, and that React's own docs recommend using them sparingly. Mention that in real-world apps, the cost of memoization can outweigh the savings for cheap computations, so always profile with React DevTools before adding them.
Briefly explain that useMemo caches the result of a computation and useCallback caches a function instance, both to avoid unnecessary recalculations or re-renders.
Describe scenarios: expensive calculations that run on every render, and passing stable references to memoized child components (React.memo) or as dependencies to other hooks.
Explain that for cheap computations, the overhead of dependency comparison and memory allocation can be greater than just recomputing; also, overuse can lead to stale closures and bugs if dependencies are mismanaged.
Highlight that memoization is a trade-off between CPU time and memory, and that you should profile first (e.g., with React DevTools Profiler) to confirm a bottleneck before optimizing.
Conclude with guidelines: use them only when necessary, keep dependency arrays correct, and consider alternatives like moving state down or using useReducer for complex state.
AI-generated suggestions, not part of the candidate's original notes. May be inaccurate — verify before relying on them.
Start by acknowledging the common use of useRef for DOM access, then pivot to its broader purpose as a mutable container that persists across renders without causing re-renders. Use concrete examples like storing timer IDs, previous values, or instance variables to illustrate its versatility, and tie it back to performance and trade-offs.
Pro tip: Emphasize that useRef is not just for DOM but for any value that needs to persist without triggering re-renders, and mention that overusing it can lead to stale or unmanaged state, so it's important to know when to use useState instead.
Briefly mention that useRef is commonly used for DOM references, but that's just one application.
Describe useRef as a way to store mutable values that persist across renders without causing re-renders.
Give concrete examples such as storing timer IDs, previous state/props, or any instance-like variable.
Highlight that useRef doesn't trigger re-renders, which is both an advantage and a potential pitfall if used for state that should update the UI.
Explain how avoiding unnecessary re-renders can improve performance, especially in complex components.
AI-generated suggestions, not part of the candidate's original notes. May be inaccurate — verify before relying on them.
I mentioned the re-render problem where any context consumer re-renders when the value changes, even if the part they care about didn't.
Start by explaining how useContext enables sharing state across components without prop drilling, then discuss its limitations such as performance issues and lack of built-in state management features. Finally, relate this to system design trade-offs, especially in large-scale applications like those at Boeing.
Pro tip: Emphasize that useContext is not a state management solution by itself but a dependency injection mechanism; combining it with useReducer or external libraries like Redux is often necessary for complex state. This shows you understand the nuances and can make informed architectural decisions.
Describe how useContext allows components to consume values from a React context without prop drilling, and how it works with a Provider to supply the value.
Highlight advantages such as simplified component hierarchy, avoidance of prop drilling, and ease of sharing global data like themes or user authentication.
Cover limitations: performance issues due to re-renders on context changes, lack of built-in state management features (e.g., middleware, dev tools), and difficulty in scaling for complex state.
Mention alternatives like Redux, Zustand, or Recoil that offer more robust state management, and discuss when to use useContext versus these solutions.
Connect the discussion to system design trade-offs, especially in large-scale applications, emphasizing the need to balance simplicity with scalability and maintainability.
AI-generated suggestions, not part of the candidate's original notes. May be inaccurate — verify before relying on them.
Easy to talk about in theory but they asked me to give a real example from something I'd built.
Start by defining what a custom hook is and its purpose in React: to extract reusable stateful logic. Then, walk through the process of building one, emphasizing the rules of hooks and how to identify duplication or complexity that warrants extraction. Finally, discuss trade-offs and when extraction might be overkill.
Pro tip: Emphasize that custom hooks are about reusing logic, not state. Also, mention that at a company like Boeing, where code maintainability and testing are critical, extracting hooks can improve testability and separation of concerns, but be cautious about premature abstraction.
Explain that a custom hook is a JavaScript function whose name starts with 'use' and that can call other hooks. It allows you to extract component logic into reusable functions.
Describe the process: identify repeated logic across components, create a function with 'use' prefix, move the logic inside, and return the necessary values. Ensure it follows the rules of hooks.
Discuss when to extract: when logic is duplicated, complex, or mixes concerns. Consider if the hook can be tested independently and if it improves readability and maintainability.
Mention potential downsides: over-abstraction, increased indirection, and difficulty in debugging. Emphasize the need to balance reuse with simplicity.
AI-generated suggestions, not part of the candidate's original notes. May be inaccurate — verify before relying on them.
Start by clearly stating the two core rules of hooks: only call hooks at the top level and only call them from React function components or custom hooks. Then explain the underlying reasons: hooks rely on a consistent call order to manage state and side effects, and they need to be associated with a component instance. Finally, connect this to the trade-offs in React's design, such as enabling reusable logic without classes while imposing constraints for predictability.
Pro tip: Mention that the rules are enforced by the ESLint plugin `eslint-plugin-react-hooks` and that violating them often leads to subtle bugs like state mismatches. This shows you understand the practical implications and tooling, not just the theory.
Clearly list the two rules: call hooks only at the top level (not inside loops, conditions, or nested functions) and call them only from React function components or custom hooks.
Describe how React relies on the order of hook calls to associate state and effects with the correct component instance. Changing the order would break this association.
Highlight that these rules enable simpler, more reusable logic compared to class components, but require developers to follow strict conventions to avoid bugs.
Note that the rules are enforced by linting tools and that violating them can cause unpredictable behavior, such as state being assigned to the wrong hook.
AI-generated suggestions, not part of the candidate's original notes. May be inaccurate — verify before relying on them.
They framed this as a concrete scenario which I liked.
Start by acknowledging the problem and outlining a systematic debugging process: first confirm the re-rendering issue using profiling tools, then identify the cause (e.g., state changes, parent re-renders, context updates), and finally apply targeted optimizations. Emphasize measuring before and after to validate fixes and discuss trade-offs of each solution.
Pro tip: Use React DevTools Profiler to record interactions and pinpoint exactly which components re-render and why; this data-driven approach prevents premature optimization and shows you value evidence over guesswork.
Use React DevTools Profiler or similar tools to record the component's render behavior and confirm excessive re-renders. Quantify the frequency and identify which props/state changes trigger them.
Determine why re-renders occur: parent re-renders, context changes, state updates, or prop changes. Check if props are being recreated unnecessarily (e.g., new object/array literals).
Implement optimizations such as React.memo, useMemo, useCallback, or moving state down. For context, consider splitting contexts or using selectors.
Re-run the profiler to ensure the fix reduces re-renders without breaking functionality. Compare before/after metrics to confirm improvement.
Explain the trade-offs of each optimization (e.g., memoization adds complexity and memory overhead) and when it's appropriate to apply them.
AI-generated suggestions, not part of the candidate's original notes. May be inaccurate — verify before relying on them.