How do you share logic between components with custom hooks?

Short answer: Custom hooks are a powerful way to share logic between components in a reusable and encapsulated way.

Explain a bit more

A custom hook is simply a JavaScript function that uses React hooks (like useState, useEffect, etc.). Example of a custom hook: // useLocalStorage.js import { useState } from 'react'; function useLocalStorage(key, initialValue) { const [storedValue, setStoredValue] = useState(() => { const item = localStorage.getItem(key);

Example code

return item ? JSON.parse(item) : initialValue; }); const setValue = (value) => { setStoredValue(value); localStorage.setItem(key, JSON.stringify(value)); }; return [storedValue, setValue];
} export default useLocalStorage; You can then use this custom hook in any component: import useLocalStorage from './useLocalStorage'; function App() { const [name, setName] = useLocalStorage('name', 'John');
return ( <div> <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Enter your name" /> </div> ); } Custom hooks allow for reusable logic (like managing form state, fetching data, etc.) and encapsulation of behavior in a way that doesn't require repeated code.

Real-world example (ShopNest)

ShopNest’s cart icon uses useState for count and useEffect to load the cart once on mount.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.