Reusing logic with hooks in React - Cheat Sheet & Quick Revision

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 use custom hooks instead of duplicating code?

Custom hooks help keep code DRY (Don't Repeat Yourself). They make your code easier to read, maintain, and test by sharing logic in one place instead of copying it in many components.

intermediate

How do you create a custom hook to fetch data from an API?

You create a function starting with 'use', use React hooks like useState and useEffect inside it to manage data and loading state, then return the data and status so components can use it.

intermediate

Can custom hooks use other hooks inside them?

Yes! Custom hooks can call built-in hooks like useState, useEffect, or even other custom hooks. This lets you build complex reusable logic by combining simpler hooks.

beginner

What rules must you follow when writing custom hooks?

You must start the function name with 'use'. Inside, call hooks only at the top level and not inside loops or conditions. This ensures React can track hook calls correctly.

What prefix must a function have to be recognized as a custom hook in React?

A handle

B get

C use

D fetch

React recognizes custom hooks by the 'use' prefix, which signals that the function uses React hooks internally.

Which React hook is commonly used inside custom hooks to manage side effects like data fetching?

A useEffect

B useState

C useContext

D useRef

useEffect lets you perform side effects such as data fetching inside custom hooks.

Why should hooks be called only at the top level of a custom hook?

A To avoid infinite loops

B So React can track hook calls in the same order on every render

C To keep code clean

D To improve performance

React relies on hooks being called in the same order each render to manage state correctly.

What is a benefit of using custom hooks?

A They allow reusing logic without changing component structure

B They replace components

C They improve CSS styling

D They make components class-based

Custom hooks let you share logic between components without changing how components are built.

Can a custom hook return multiple values?

A No, only one value

B Only strings

C Only numbers

D Yes, usually as an object or array

Custom hooks often return multiple values bundled in an object or array for flexibility.

Explain how you would create and use a custom hook to share logic between two React components.

Think about how to wrap state and effects in a reusable function.

What are the rules you must follow when writing custom hooks in React and why are they important?

Consider React's hook call order and naming conventions.