Deep Dive into React Hooks: useState, useEffect, and Custom Hooks

let talk about

Introduction:

React Hooks provide a powerful way to manage state and side effects in functional components.

In this post, we’ll explore three essential hooks—useState, useEffect, and Custom Hooks—and how they can enhance your React applications.

useState: Managing State in Functional Components

useState is the most basic hook for state management in React.
Syntax: const [state, setState] = useState(initialValue);
Key Points:
- Allows functional components to have internal state.
- You can pass an initial value or a function to compute the initial state.
- The setState function allows updating the state, triggering a re-render.
Example:


 const [count, setCount] = useState(0);

useEffect: Handling Side Effects

useEffect is used to handle side effects in your components, such as data fetching, subscriptions, and manually changing the DOM.
Syntax:


 useEffect(() => {

  // Effect code

  return () => {

   // Cleanup (optional)

  };

 }, [dependencies]);

Key Points:
- By default, useEffect runs after every render.
- You can control when it runs by passing dependencies as the second argument.
- For one-time effects (like componentDidMount), pass an empty array [].
Example: Fetching data when a component mounts.


 useEffect(() => {

  fetchData();

 }, []);

Custom Hooks: Reusable Logic

Custom hooks allow you to extract and reuse logic across multiple components.
Why Custom Hooks?
- They help avoid code duplication.
- Promote reusability and cleaner component code.
Syntax:


 const useCustomHook = () => {

  // Custom logic

  return [state, handler];

 };

Example: A custom hook to manage form inputs.


 const useInput = (initialValue) => {

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

  const handleChange = (e) => setValue(e.target.value);

  return [value, handleChange];

 };