Custom hook best practices 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 custom hooks start with the word "use"?

Starting with "use" lets React know the function follows hook rules. This helps React check for correct usage and enables linting tools to warn about mistakes.

intermediate

Name two best practices when creating custom hooks.

1. Keep hooks focused on a single responsibility to make them easy to understand and reuse.<br>2. Use built-in hooks inside custom hooks to manage state or side effects cleanly.

intermediate

How can you make a custom hook more reusable?

Accept parameters to customize behavior and return only the necessary data or functions. Avoid tying it to specific UI details so it can work in different components.

intermediate

What should you avoid inside custom hooks?

Avoid calling hooks conditionally or inside loops. Also, avoid side effects that are not related to the hook’s purpose to keep behavior predictable.

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

A fetch

B get

C use

D handle

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

Which of these is a good practice when writing custom hooks?

A Keeping the hook focused on one task

B Returning JSX from the hook

C Directly manipulating the DOM inside the hook

D Calling hooks conditionally inside the custom hook

Custom hooks should focus on one task to be clear and reusable. Calling hooks conditionally or manipulating DOM directly breaks rules.

How can you make a custom hook reusable across different components?

A Hardcode component-specific logic inside the hook

B Use global variables inside the hook

C Return only UI elements from the hook

D Accept parameters to customize behavior

Accepting parameters lets the hook adapt to different needs, making it reusable.

What should a custom hook return?

A Only JSX elements

B State values and functions to update them

C Nothing, it just runs code

D DOM nodes

Custom hooks usually return state and functions so components can use and control the logic.

Why is it important to follow hook rules inside custom hooks?

A To avoid React warnings and bugs

B To make the code longer

C To prevent using useState

D To avoid using parameters

Following hook rules prevents bugs and lets React optimize rendering and state management.

Explain what a custom hook is and why you would create one in React.

Think about how to share logic without repeating code.

List and describe three best practices to follow when writing custom hooks.

Consider naming, clarity, reusability, and React rules.