React Hooks Basics

Question 1

What are React hooks?

Accepted Answer

Hooks are functions introduced in React 16.8 that let functional components use state, lifecycle features, context, and other React capabilities without writing a class. Examples include useState, useEffect, useContext, and useReducer.

Question 2

What are the rules of hooks?

Accepted Answer

Hooks must only be called at the top level of a function, never inside loops, conditions, or nested functions. They must only be called from React function components or from other custom hooks, never from regular JavaScript functions.

Question 3

What does useState do?

Accepted Answer

useState is a hook that adds local state to a functional component. It returns an array with the current state value and a function to update it. Calling the updater schedules a re-render with the new value.

Question 4

What does useReducer do?

Accepted Answer

useReducer is a hook for managing more complex state logic. It takes a reducer function and an initial state, and returns the current state plus a dispatch function. You call dispatch with an action to produce the next state.

Question 5

When would you choose useReducer over useState?

Accepted Answer

useReducer is preferred when state logic is complex, when the next state depends on the previous one in non-trivial ways, or when multiple related values update together. It also makes state transitions easier to test and reason about.

Question 6

What is a custom hook?

Accepted Answer

A custom hook is a JavaScript function whose name starts with use and that can call other hooks. It lets you extract and reuse stateful logic between components without changing their structure or introducing wrapper components.

Question 7

What does useRef do?

Accepted Answer

useRef returns a mutable object with a current property that persists across renders. It is commonly used to access DOM nodes directly or to store a mutable value that should not cause a re-render when it changes.

Question 8

What is the difference between useRef and useState?

Accepted Answer

Updating a useState value causes the component to re-render. Updating a useRef current property does not trigger a re-render. Use state for values that affect the output, and refs for values that should persist without causing updates.

Question 9

What is useId?

Accepted Answer

useId is a hook that generates a unique, stable identifier that is consistent across server and client rendering. It is useful for associating labels with form inputs or any case where a unique ID is needed without causing hydration mismatches.

Question 10

What is useImperativeHandle?

Accepted Answer

useImperativeHandle is a hook used with forwardRef to customize the value exposed to a parent component through a ref. It lets a component expose a limited set of imperative methods instead of the raw DOM node.

---