The Project | About Us | Contribute | Donations | License

HOME

In this section, we will explore custom hooks in React. Custom hooks allow you to extract and reuse logic across multiple components, making your code more modular and maintainable.

What are Custom Hooks?

Custom hooks are JavaScript functions whose names start with "use" and that can call other hooks. They allow you to encapsulate logic that can be reused across different components.

Key Points:

Custom hooks are a way to reuse stateful logic.
They follow the same rules as React hooks.
They can call other hooks (e.g., useState, useEffect).

Creating a Custom Hook

Let's create a simple custom hook that manages a counter.

Example: useCounter Hook

import { useState } from 'react';

// Custom Hook: useCounter
function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
}

export default useCounter;

Explanation:

useCounter is a custom hook that initializes a counter with a default value.
It provides three functions: increment, decrement, and reset to manipulate the counter.
The hook returns an object containing the current count and the three functions.

Using the Custom Hook

Now, let's use the useCounter hook in a component.

Example: Counter Component

import React from 'react';
import useCounter from './useCounter';

function Counter() {
  const { count, increment, decrement, reset } = useCounter(10);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

export default Counter;

Explanation:

The Counter component uses the useCounter hook to manage its state.
It displays the current count and provides buttons to increment, decrement, and reset the count.

Practical Exercise

Task:

Create a custom hook called useToggle that manages a boolean state. The hook should provide a function to toggle the state between true and false.

Solution:

import { useState } from 'react';

// Custom Hook: useToggle
function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);

  const toggle = () => setValue(!value);

  return [value, toggle];
}

export default useToggle;

Using the useToggle Hook

import React from 'react';
import useToggle from './useToggle';

function ToggleComponent() {
  const [isToggled, toggle] = useToggle();

  return (
    <div>
      <p>The value is {isToggled ? 'True' : 'False'}</p>
      <button onClick={toggle}>Toggle</button>
    </div>
  );
}

export default ToggleComponent;

Explanation:

useToggle initializes a boolean state and provides a toggle function to switch its value.
ToggleComponent uses the useToggle hook to manage its state and provides a button to toggle the value.

Common Mistakes and Tips

Common Mistakes:

Not following the rules of hooks: Custom hooks must start with "use" and follow the rules of hooks (e.g., only call hooks at the top level).
Overcomplicating hooks: Keep custom hooks simple and focused on a single piece of logic.

Tips:

Reuse logic: Use custom hooks to extract and reuse logic across multiple components.
Encapsulation: Encapsulate complex logic within custom hooks to keep your components clean and readable.

Conclusion

Custom hooks are a powerful feature in React that allow you to encapsulate and reuse stateful logic across your application. By creating custom hooks, you can make your code more modular, maintainable, and easier to understand. In the next section, we will dive deeper into routing in React with React Router.

Custom Hooks

What are Custom Hooks?

Key Points:

Creating a Custom Hook

Example: useCounter Hook

Explanation:

Using the Custom Hook

Example: Counter Component

Explanation:

Practical Exercise

Task:

Solution:

Using the useToggle Hook

Explanation:

Common Mistakes and Tips

Common Mistakes:

Tips:

Conclusion

React Course

Module 1: Introduction to React

Module 2: React Components

Module 3: Working with Events

Module 4: Advanced Component Concepts

Module 5: React Hooks

Module 6: Routing in React

Module 7: State Management

Module 8: Performance Optimization

Module 9: Testing in React

Module 10: Advanced Topics

Module 11: Project: Building a Complete Application