Q1. What are custom hooks in React?
Custom hooks are JavaScript functions that start with 'use' and can call other hooks. They allow you to extract component logic into reusable functions. For example, a useFetch hook can encapsulate data fetching logic.
Q2. How do you create a custom hook?
Create a function that uses built-in hooks and returns whatever values are needed. Example: function useLocalStorage(key, initialValue) { const [value, setValue] = useState(() => { ... }); useEffect(...); return [value, setValue]; }.
Q3. What are the rules for custom hooks?
Custom hooks must follow the Rules of Hooks: only call hooks at the top level, and only from React functions or other custom hooks. They should be named with use prefix to enable linting.
Q4. Why use custom hooks?
They promote code reuse, separation of concerns, and cleaner components. For instance, you can share logic like form handling, API calls, or subscription management across multiple components.
Q5. Can custom hooks return JSX?
Typically, custom hooks return data or functions, not JSX. However, they can return anything, but returning JSX would make them more like components. It's better to keep hooks for logic and components for rendering.