React Interview Questions: Hooks

Implement a Toggle Button with useState

Create a functional component with a button that toggles between 'ON' and 'OFF' states using useState.

Expected output: A button that displays 'ON' or 'OFF' and toggles text when clicked.

Hint: Initialize state with a boolean and toggle it on button click.

Fetch Data with useEffect

Build a component that fetches user data from an API when mounted and displays it.

Expected output: Component displays fetched user data or a loading message.

Hint: Use useEffect with an empty dependency array and fetch inside it.

Create a Custom Hook for Window Width

Write a custom Hook that tracks and returns the current window width.

Expected output: Custom Hook returns updated window width on resize.

Hint: Use useState and useEffect to listen to window resize events.

useState allows functional components to have state variables, enabling them to store and update data over time.

useEffect runs side effects after rendering. It runs after every render by default but can be controlled with a dependency array to run only when specified values change.

Hooks must be called only at the top level of React function components or custom Hooks, and never inside loops, conditions, or nested functions.

A custom Hook is a function whose name starts with 'use' and can call other Hooks to encapsulate reusable stateful logic.