Why custom hooks are used in React - Quick Recap

Recall & Review

beginner

What is a custom hook in React?

A custom hook is a JavaScript function that starts with 'use' and lets you reuse stateful logic between components without repeating code.

beginner

Why do developers create custom hooks?

To share and reuse logic easily across multiple components, making code cleaner and easier to maintain.

intermediate

How do custom hooks improve code organization?

They separate complex logic from UI code, so components stay simple and focused on rendering.

intermediate

Can custom hooks use other hooks inside them?

Yes, custom hooks can use built-in hooks like useState or useEffect to manage state and side effects internally.

beginner

Give an example scenario where a custom hook is useful.

When multiple components need to fetch data from the same API and handle loading and error states, a custom hook can manage this logic once and share it.

What is the main reason to use a custom hook in React?

A To reuse stateful logic across components

B To style components

C To create class components

D To write HTML inside JavaScript

Custom hooks help reuse logic like state and effects across components, avoiding code duplication.

Which of these is true about custom hooks?

A They cannot use other hooks

B They can only be used once

C They replace React components

D They must start with 'use'

Custom hooks must start with 'use' so React can identify them as hooks.

Custom hooks help keep components:

A Without any state

B Simple and focused on UI

C Dependent on class syntax

D Long and complex

By moving logic to custom hooks, components stay clean and focused on rendering.

Can a custom hook use useState inside it?

A Yes, it can manage its own state

B No, hooks cannot be nested

C Only if it is a class component

D Only outside React components

Custom hooks can use built-in hooks like useState to manage internal state.

Which naming convention is correct for a custom hook?

A FetchData

B fetchDataHook

C useFetchData

D customHook

Custom hooks must start with 'use' to follow React's rules and conventions.

Explain why custom hooks are useful in React and how they help with code reuse.

Think about how you might share the same behavior in many places without repeating code.

Describe how a custom hook can improve the organization of a React app's code.

Consider how moving logic out of components helps keep things tidy.