Creating custom hooks in React - Quick Revision & Summary

Recall & Review

beginner

What is a custom hook in React?

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

beginner

Why should you start the name of a custom hook with "use"?

React uses the "use" prefix to identify hooks. This helps React enforce rules of hooks and enables linting tools to check correct usage.

intermediate

How do custom hooks help in React development?

Custom hooks let you share logic like fetching data, managing forms, or animations across components. This keeps code clean and avoids repetition.

beginner

Can custom hooks use other hooks inside them?

Yes, custom hooks can call built-in hooks like useState, useEffect, or even other custom hooks to build complex reusable logic.

beginner

What is a simple example of a custom hook?

A simple custom hook could be useCounter that uses useState to keep a count and returns the count and a function to increase it.

What prefix must a custom hook's name start with in React?

A use

B get

C fetch

D hook

Custom hooks must start with "use" so React can identify them as hooks and apply rules correctly.

Which of these can a custom hook NOT do?

A Call other hooks

B Return JSX elements

C Manage state

D Reuse logic

Custom hooks do not return JSX. They return values or functions to be used inside components that return JSX.

Why use custom hooks instead of copying code between components?

A To keep code DRY (Don't Repeat Yourself)

B To make components bigger

C To avoid using state

D To write more lines of code

Custom hooks help keep code DRY by sharing logic instead of copying it.

Which React hook is commonly used inside custom hooks to manage state?

A useRef

B useEffect

C useState

D useContext

useState is often used inside custom hooks to manage stateful values.

Can a custom hook call another custom hook?

A No

B Only if they don't use state

C Only if they are in the same file

D Yes

Custom hooks can call other custom hooks to compose complex logic.

Explain what a custom hook is and why it is useful in React.

Think about how you can share code between components without copying.

Describe how you would create a simple custom hook to manage a counter.

Start with useState and return what components need.