React Custom Hooks

Build reusable custom hooks in React to share stateful logic between components without duplicating code.

What This Skill Does

This skill helps you create custom React hooks that extract and share component logic. You'll learn how to identify reusable patterns, properly name hooks, share stateful logic (not state itself), and follow React conventions.

Instructions

When a user asks you to create or refactor code using custom hooks, follow these steps:

1. Identify Duplicated Logic

Look for patterns where multiple components use similar state and effects. Common candidates:

Network status tracking

Form input handling

Data fetching

Window dimensions

Local storage sync

Subscription management

2. Extract into a Custom Hook

**Naming Convention:**

Always prefix with `use` followed by a capital letter (e.g., `useOnlineStatus`, `useFormInput`, `useWindowSize`)

Hook names must start with `use` to allow React linter to enforce Hook rules

**Structure:**

```javascript

function useCustomHook() {

const [state, setState] = useState(initialValue);

useEffect(() => {

// Setup subscription or side effect

return () => {

// Cleanup

};

}, [dependencies]);

return state; // or object with multiple values

}

```

3. Move All Related Logic

Extract the complete logic including:

State declarations (`useState`)

Effects (`useEffect`)

Event handlers

Helper functions

Return values

4. Replace in Components

Replace duplicated code with the custom hook call:

```javascript

function MyComponent() {

const value = useCustomHook();

// Use value in component

}

```

5. Key Principles to Follow

**DO:**

Extract hooks when you see duplicated useState + useEffect patterns

Return values that components need (primitives, objects, or arrays)

Use other hooks inside custom hooks

Follow the naming convention strictly (`use` prefix)

Keep hooks focused on a single responsibility

**DON'T:**

Share state between components (custom hooks share logic, not state)

Call hooks conditionally or in loops

Use `use` prefix for regular functions that don't call hooks

Create hooks that don't actually use any React hooks (make them regular functions instead)

6. Common Patterns

**Network Status:**

```javascript

function useOnlineStatus() {

const [isOnline, setIsOnline] = useState(true);

useEffect(() => {

function handleOnline() { setIsOnline(true); }

function handleOffline() { setIsOnline(false); }

window.addEventListener('online', handleOnline);

window.addEventListener('offline', handleOffline);

return () => {

window.removeEventListener('online', handleOnline);

window.removeEventListener('offline', handleOffline);

};

}, []);

return isOnline;

}

```

**Form Input:**

```javascript

function useFormInput(initialValue) {

const [value, setValue] = useState(initialValue);

function handleChange(e) {

setValue(e.target.value);

}

return {

value,

onChange: handleChange

};

}

```

**Data Fetching:**

```javascript

function useData(url) {

const [data, setData] = useState(null);

const [loading, setLoading] = useState(true);

const [error, setError] = useState(null);

useEffect(() => {

let ignore = false;

fetch(url)

.then(res => res.json())

.then(data => {

if (!ignore) {

setData(data);

setLoading(false);

}

})

.catch(err => {

if (!ignore) {

setError(err);

setLoading(false);

}

});

return () => { ignore = true; };

}, [url]);

return { data, loading, error };

}

```

7. Understanding State Independence

Remember: Each component that calls a custom hook gets its own isolated state. If two components call `useOnlineStatus()`, they each have separate `isOnline` state variables that happen to have the same value because they're synchronized with the same external source (network status).

8. When to Extract

Extract a custom hook when:

You see duplicated useState + useEffect patterns

Logic could be reused across multiple components

You want to hide complex implementation details

The extracted logic has a clear, single responsibility

Don't extract if:

Logic is only used once

Extraction makes code harder to understand

The function doesn't actually use any hooks (make it a regular function)

Example Usage

**User Request:** "I have two components that both check if the user is online. Can you help me avoid the duplication?"

**Your Response:**

1. Show the custom hook extraction (`useOnlineStatus.js`)

2. Demonstrate usage in both components

3. Explain that each component gets its own state, synchronized with the same external source

4. Point out the benefits: less duplication, clearer component code, reusable logic

Important Notes

Custom hooks must follow the Rules of Hooks (only call at top level, only from React functions)

The React linter enforces these rules but only if the function name starts with `use`

Custom hooks share stateful logic, not state itself—each component gets independent state

Always include cleanup in useEffect returns when subscribing to external systems

Document what values your custom hook returns and any parameters it accepts

React Custom Hooks

React Custom Hooks

What This Skill Does

Instructions

1. Identify Duplicated Logic

2. Extract into a Custom Hook

3. Move All Related Logic

4. Replace in Components

5. Key Principles to Follow

6. Common Patterns

7. Understanding State Independence

8. When to Extract

Example Usage

Important Notes

Reviews (0)