In React, Hooks are functions that let you "hook into" React's internal features—like state management and lifecycle methods—from inside standard JavaScript function components.
They provide a way to manage state and side effects without writing class components.
They promote functional and declarative approaches to programming.
How would you add a piece of local state to a functional component using a hook?
If you need to run some code after a component mounts, which hook would you use and how?
What happens if you call a hook conditionally inside a component?
You have a component that fetches data on mount and also needs to refetch when a prop changes. How would you implement this with hooks, and what pitfalls might you encounter?
While adding a useEffect to clean up a subscription, the cleanup never runs. What could be causing this and how would you fix it?
Explain why moving a piece of state up to a parent using a custom hook helped reduce prop drilling in a feature you built.
Our team is seeing performance regressions after converting several class components to useState/useEffect. How would you investigate and mitigate the impact of hooks on rendering performance?
Design a reusable custom hook for debouncing user input that works across multiple components, and discuss how you'd test it and handle edge cases.
When multiple useEffect hooks depend on overlapping state, how do you decide the ordering and dependency arrays to avoid stale closures?
We plan to migrate a large legacy codebase from class components to functional components with hooks. What strategy would you propose to manage this transition while minimizing risk?
How would you enforce consistent hook usage across several teams in a monorepo, and what tooling would you adopt?
Discuss the trade‑offs of using a global state library versus building a set of shared custom hooks for state management in a large product.