Reusing Logic with Custom Hooks is an important React concept that allows developers to extract reusable stateful logic from components and use it across multiple components. Custom Hooks help reduce duplicated code, improve readability, and make React applications easier to maintain.
Course Link: JustAcademy React JS Training Course
Course Demo: Register for React JS Course Demo
Reusing logic means writing a piece of functionality once and using it in multiple places instead of repeating the same code in different components. In React, developers can reuse stateful logic through Custom Hooks.
For example, multiple components may need to track network status, handle form inputs, fetch API data, manage a counter, or listen for browser events. Instead of repeating the same logic, developers can create a Custom Hook and call it wherever required.
import { useState } from 'react';
function CounterOne() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Counter One: {count}
</button>
);
}
function CounterTwo() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Counter Two: {count}
</button>
);
}Explanation: Both components contain similar counter logic. If the same logic is needed in many components, maintaining repeated code can become difficult. A Custom Hook can extract and reuse the counter behavior.
Custom Hooks are JavaScript functions created by developers to reuse logic that uses React Hooks. A Custom Hook can combine built-in Hooks such as useState, useEffect, and useContext to perform a particular task.
Custom Hooks follow a naming convention: their names start with use, followed by a capital letter. Examples include useCounter, useOnlineStatus, useFormInput, and useFetch.
import { useState } from 'react';
function useCounter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(previousCount => previousCount + 1);
};
return { count, increment };
}
export default useCounter;Explanation: The useCounter Hook manages counter state and returns the current count and an increment function. Components can import this Hook and use its returned values.
Before creating a Custom Hook, developers may copy the same state and effect logic into multiple components. This works, but changes must be made in every copy, which can introduce errors.
import { useState, useEffect } from 'react';
function StatusBar() {
const [isOnline, setIsOnline] = useState(true);
useEffect(() => {
const handleOnline = () => setIsOnline(true);
const handleOffline = () => setIsOnline(false);
window.addEventListener('online', handleOnline);
window.addEventListener('offline', handleOffline);
return () => {
window.removeEventListener('online', handleOnline);
window.removeEventListener('offline', handleOffline);
};
}, []);
return (
<h2>{isOnline ? 'Online' : 'Disconnected'}</h2>
);
}
export default StatusBar;If another component needs to show network status, the same logic might be copied into that component. A Custom Hook allows both components to reuse the implementation.
We can extract the online-status logic into a Hook named useOnlineStatus. Components can then use the Hook without needing to manage browser event listeners themselves.
import { useState, useEffect } from 'react';
function useOnlineStatus() {
const [isOnline, setIsOnline] = useState(
typeof navigator === 'undefined' ? true : navigator.onLine
);
useEffect(() => {
const handleOnline = () => setIsOnline(true);
const handleOffline = () => setIsOnline(false);
window.addEventListener('online', handleOnline);
window.addEventListener('offline', handleOffline);
return () => {
window.removeEventListener('online', handleOnline);
window.removeEventListener('offline', handleOffline);
};
}, []);
return isOnline;
}
export default useOnlineStatus;import useOnlineStatus from './useOnlineStatus';
function StatusBar() {
const isOnline = useOnlineStatus();
return (
<h2>{isOnline ? 'Online' : 'Disconnected'}</h2>
);
}
export default StatusBar;import useOnlineStatus from './useOnlineStatus';
function SaveButton() {
const isOnline = useOnlineStatus();
function handleSave() {
console.log('Progress saved');
}
return (
<button disabled={!isOnline} onClick={handleSave}>
{isOnline ? 'Save Progress' : 'Reconnecting...'}
</button>
);
}
export default SaveButton;Explanation: Both components use the same Custom Hook. The status display shows whether the browser is online, while the Save button becomes disabled when the browser reports that it is offline. The Hook removes duplicated implementation code and keeps each component focused on its purpose.
Note: The browser's online indicator does not guarantee that a particular website or server is reachable.
An important concept in React is that Custom Hooks share the implementation of logic, but each Hook call normally has its own independent state.
import useCounter from './useCounter';
function CounterOne() {
const { count, increment } = useCounter();
return (
<button onClick={increment}>
Counter One: {count}
</button>
);
}
function CounterTwo() {
const { count, increment } = useCounter();
return (
<button onClick={increment}>
Counter Two: {count}
</button>
);
}Explanation: Each component calls useCounter() separately. Counter One and Counter Two therefore maintain independent count values. Updating one counter does not automatically update the other.
If multiple components need to share the same state, you can lift state to a common parent, use Context, or use a suitable shared state-management solution.
Forms often contain repeated logic for storing input values, handling changes, and connecting values to input elements. A Custom Hook can extract this behavior and reuse it across multiple fields.
import { useState } from 'react';
function useFormInput(initialValue = '') {
const [value, setValue] = useState(initialValue);
function handleChange(event) {
setValue(event.target.value);
}
return {
value,
onChange: handleChange,
setValue
};
}
export default useFormInput;import useFormInput from './useFormInput';
function ContactForm() {
const firstName = useFormInput('');
const lastName = useFormInput('');
function handleSubmit(event) {
event.preventDefault();
alert(`Name: ${firstName.value} ${lastName.value}`);
}
return (
<form onSubmit={handleSubmit}>
<input
value={firstName.value}
onChange={firstName.onChange}
placeholder="First Name"
required
/>
<input
value={lastName.value}
onChange={lastName.onChange}
placeholder="Last Name"
required
/>
<button type="submit">Submit</button>
</form>
);
}
export default ContactForm;Explanation: The same Hook handles both fields, but each call maintains its own value. This reduces duplicated code while allowing the first name and last name to update independently.
Multiple components may need to retrieve data from APIs. A Custom Hook can centralize loading, error, and data-handling logic so that components do not need to repeat it.
import { useEffect, useState } from 'react';
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const controller = new AbortController();
async function loadData() {
setLoading(true);
setError(null);
try {
const response = await fetch(url, {
signal: controller.signal
});
if (!response.ok) {
throw new Error(`HTTP error: ${response.status}`);
}
const result = await response.json();
setData(result);
} catch (err) {
if (err.name !== 'AbortError') {
setError(err.message || 'Unable to fetch data');
}
} finally {
if (!controller.signal.aborted) {
setLoading(false);
}
}
}
loadData();
return () => controller.abort();
}, [url]);
return { data, loading, error };
}
export default useFetch;import useFetch from './useFetch';
function Users() {
const { data, loading, error } = useFetch(
'https://jsonplaceholder.typicode.com/users'
);
if (loading) return <p>Loading users...</p>;
if (error) return <p>Error: {error}</p>;
return (
<ul>
{data.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
export default Users;Explanation: The useFetch Hook accepts a URL and returns data, loading status, and any error. The same Hook can be reused by other components with different URLs. It also aborts an outstanding request when the URL changes or the component using the Hook unmounts.
Custom Hooks can receive values from component props or state and pass data to other Hooks. Because Hooks run as part of component rendering, they receive the latest values provided by the component.
import { useState } from 'react';
import useChatRoom from './useChatRoom';
function ChatRoom({ roomId }) {
const [serverUrl, setServerUrl] = useState(
'https://localhost:1234'
);
useChatRoom({ roomId, serverUrl });
return (
<div>
<label>
Server URL:
<input
value={serverUrl}
onChange={event => setServerUrl(event.target.value)}
/>
</label>
<h2>Current room: {roomId}</h2>
</div>
);
}
export default ChatRoom;Explanation: The component passes roomId and serverUrl to the useChatRoom Hook. The Hook can use these values to establish or update a connection. Its implementation should include the required effect dependencies and cleanup logic.
Important: This example shows the component-to-Hook data flow. A working chat connection also requires a correctly implemented connection module and a reachable server.
You should consider creating a Custom Hook when it makes your code clearer or allows useful stateful logic to be reused.
You do not need to create a Custom Hook for every small piece of duplicated code. For example, a simple calculation that does not use React Hooks may be better as an ordinary JavaScript function.
use prefix, such as useCounter.useOnlineStatus or useChatRoom over vague lifecycle wrappers.| Feature | Custom Hook | Regular Function |
|---|---|---|
| Naming | Starts with use. |
Can use any valid function name. |
| Can call React Hooks | Yes, following the Rules of Hooks. | No. |
| Primary purpose | Reuse stateful React logic. | Perform general JavaScript operations. |
| Example | useOnlineStatus() |
calculateTotal() |
| Return value | Can return state, functions, objects, arrays, or other values. | Can return any JavaScript value. |
| Without a Custom Hook | With a Custom Hook |
|---|---|
| Similar logic is repeated across components. | Reusable logic is extracted into one function. |
| Changes may need to be made in several places. | Shared implementation can be maintained centrally. |
| Components may contain implementation details. | Components can focus on their intended behavior and UI. |
| Repeated code can make components longer. | Components can become shorter and easier to understand. |
Answer: It means implementing functionality once and using it in multiple components instead of duplicating the same logic.
Answer: Custom Hooks extract stateful behavior into reusable functions that components can call whenever they need that functionality.
Answer: Their names start with use followed by a capital letter, such as useCounter.
Answer: No. Each call normally has its own state. To share the same state, use an approach such as lifting state to a common parent or using Context.
Answer: Yes. A Custom Hook can combine built-in React Hooks to implement reusable stateful behavior.
Answer: Create one when it improves logic reuse, readability, organization, or maintainability.
Answer: No. React Hooks must be called from function components or Custom Hooks.
Answer: A component typically returns JSX describing UI, while a Custom Hook reuses behavior and can return values, functions, objects, or arrays.
Answer: Cleanup removes event listeners, disconnects subscriptions, or clears resources created by an effect to prevent unwanted behavior and resource leaks.
Answer: Yes. Custom Hooks can be composed by calling other Hooks at the top level.
useCounter Hook and use it in two different components.useToggle Hook for showing and hiding a message.useFormInput Hook for managing name and email fields.useOnlineStatus Hook for displaying browser network status.useFetch Hook for loading data from an API.useDocumentTitle Hook that updates the browser tab title.use naming convention.useState and useEffect.Learn React concepts and develop practical application-building skills with these resources:
Reusing logic with Custom Hooks helps developers build cleaner, more maintainable React applications. By extracting repeated stateful behavior into focused functions, developers can reduce duplication and keep components focused on their UI. Remember that Custom Hooks share logic rather than state, follow the Rules of Hooks, and should be created when they provide a clear benefit.
