What are Custom Hooks in ReactJS

Custom Hooks in ReactJS are JavaScript functions that start with the word "use" and allow you to extract and reuse stateful logic between components. They enable you to build and share functionality without repeating code. Custom Hooks leverage React’s built-in hooks like useState, useEffect, and others, allowing you to create more modular and maintainable code.

Key Points

1. Reusable Logic: Custom Hooks encapsulate stateful logic that can be reused across multiple components.
2. Separation of Concerns: They help separate concerns by isolating logic into reusable functions, making components cleaner and more focused.
3. Composition: Custom Hooks can compose multiple React hooks and other custom hooks, making it easy to build complex functionality.

Example

Here’s an example of a simple custom hook that handles form input logic.

import { useState } from 'react';
// Custom Hook for managing form inputs
function useFormInput(initialValue) {
  const [value, setValue] = useState(initialValue);
  function handleChange(e) {
    setValue(e.target.value);
  }
  return {
    value,
    onChange: handleChange,
  };
}
export default useFormInput;

Usage

You can use this custom hook in a component like this.

import React from 'react';
import useFormInput from './useFormInput';
function MyForm() {
  const name = useFormInput('');
  const email = useFormInput('');
  function handleSubmit(e) {
    e.preventDefault();
    console.log('Name:', name.value);
    console.log('Email:', email.value);
  }
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" {...name} placeholder="Name" />
      <input type="email" {...email} placeholder="Email" />
      <button type="submit">Submit</button>
    </form>
  );
}
export default MyForm;

Advantages

• Code Reusability: Share logic without duplicating code across components.
• Cleaner Components: Components focus on rendering UI while custom hooks manage logic.
• Testing: Easier to test isolated logic in custom hooks compared to complex component logic.

Custom Hooks are a powerful feature in React that promotes cleaner code architecture and better separation of concerns, enhancing both development and maintenance.

Custom Hooks in ReactJS are functions that allow you to reuse stateful logic between components without repeating code. They are built using React’s built-in hooks like useState and useEffect and help in creating modular, maintainable code. Custom Hooks enable cleaner components by isolating logic and promoting code reuse, enhancing development efficiency and component organization.