What is useEffect hook?

useEffect is a built-in React hook that lets you "hook into" the component lifecycle. It's a way to tell React to run a function after every render, or after a specific state or prop has changed. Think of it as a function that performs actions that are "outside" the normal flow of rendering a component.

It takes two arguments:

• a function containing the side effect code and

• an optional dependency array.

The basic syntax looks like this:

import React, { useEffect } from 'react';

useEffect(() => {
  // Your side effect code goes here
}, [dependencyArray]);

By employing useEffect you are signaling to React that your component needs to execute specific actions after rendering. React keeps track of the function you supply (our effects) and runs it following the DOM updates.

This feature allows you to execute various operations such as updating the document title, fetching data, or making API calls.

When and Where to Use It

The useEffect hook is used for any kind of side effect. Common use cases include:

• Data Fetching: Making an API call to get data and then storing it in state.

• Subscriptions: Setting up a subscription to an external service, like a WebSocket.

• Manually Interacting with the DOM: Directly manipulating the document, for example, to set the title of the page.

• Timers: Setting up and clearing timers, such as setTimeout or setInterval.

The Dependency Array: Controlling the Effect's Behavior

The second argument to useEffect, the dependency array, is crucial for controlling when your effect runs. The effect will re-run only when a value in this array changes. This prevents the effect from running on every single render, which can lead to performance issues or infinite loops.

1. No Dependency Array

If you omit the dependency array, the effect will run after every single render of the component.

useEffect(() => {
  // This will run after every render
  console.log('Component rendered or state updated');
});

This is generally not recommended for performance-sensitive operations like data fetching, as it will cause a new request on every render.

2. Empty Dependency Array ([])

An empty dependency array tells React that the effect should only run once, after the initial render of the component. This is the ideal use case for one-time setup effects, like an initial API call.

useEffect(() => {
  // This will only run once, on component mount
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data));
}, []);

3. Populated Dependency Array ([prop1, state1])

When you include variables (props or state) in the dependency array, the effect will re-run whenever any of those variables change. This is perfect for effects that depend on specific values.

const [userId, setUserId] = useState(1);
const [userData, setUserData] = useState(null);

useEffect(() => {
  // This will re-run whenever userId changes
  fetch(`https://api.example.com/users/${userId}`)
    .then(response => response.json())
    .then(data => setUserData(data));
}, [userId]);

In this example, the effect will fetch new user data only when the userId state variable is updated, not on every render.

The Cleanup Function

Some side effects, like subscriptions or timers, need to be "cleaned up" to prevent memory leaks. The useEffect hook provides a way to do this by allowing you to return a function from your effect callback. This returned function is the cleanup function.

React will run the cleanup function in two scenarios:

1. Just before the effect re-runs due to a dependency change.

2. When the component is unmounted (removed from the DOM).

Here's an example of using a cleanup function to unsubscribe from a service.

import React, { useEffect } from 'react';
import ChatAPI from './ChatAPI';

function ChatRoom({ roomId }) {
  useEffect(() => {
    // This function sets up the subscription
    ChatAPI.subscribeToChat(roomId);

    // This function is the cleanup function
    return () => {
      ChatAPI.unsubscribeFromChat(roomId);
    };
  }, [roomId]); // Re-subscribe if the roomId changes

  return <h1>Welcome to the chat room!</h1>;
}

In this code, the ChatAPI.subscribeToChat function is called when the component mounts and whenever the roomId prop changes. The function returned from useEffect will then unsubscribe from the previous chat before the new subscription is set up, and also when the ChatRoom component unmounts. This is a crucial pattern for managing external resources in your React components.

Points to Remember:

• Use the cleanup function to free up the resources and for cleanups related to the effects.

• The cleanup function runs before the component unmounts and before the effect re-run due to dependency change.

Conclusion

The useEffect hook in React is powerful feature for managing the side effects in functional components. It’s ability to handle post render actions, combined with a customizable dependency array and cleanup mechanism, make it an essential for efficient and effective React development.

Thankyou for reading! Connect with me on X/Twitter or Linkedin 🙌

What is useState Hook?

The useState hook provides a way to manage local state in functional component. It returns two values:

• The current state and a function that updates the state.

• The State can be of any type, such as numbers, strings, arrays, or objects.

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

• state: the current state value

• setState: A function that updates the state.

• initialValue: The initial value of the state ( can be any data type).

• Example:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // count starts at 0

  return (
    <div>
      <p>Current Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

In the above example, the count variable holds the current state, and setCount is used to update the state when the button is clicked.

When to Use useState?

You should use useState when you need to :

1. Track Local State: If your component needs to manage a piece of state that is independent of the rest of the application, such as form inputs, toggles, counter, etc.

2. Handle User Interactions: When you need to update the UI based on user interactions (e.g., button clicks, types, etc.). It allows you to store the user’s input or response and reflect those changes in the component.

3. Simple State Management: For small, self-contained state logic that doesn’t need to be shared across multiple components. For example, handling the visibility of a modal, toggling a dropdown, or switching between themes.

4. Component-specific state: When the state only concerns a single component and is not required globally or across multiple components.

Here comes the best part, we should always be careful and known about when should we avoid the use of useState.

Where to Avoid using useState?

While useState is powerful, there are cases where you should avoid using it:

1. Complex or Shared State:

   When state needs to be shared across multiple components: If your application has a state that needs to be accessed or modified by multiple components (e.g., user authentication state or theme settings), using useState in each component can lead to redundant or difficult-to-manage state. In such cases, consider using context (useContext) or a state management solution like Redux.

   For deeply nested state: If the state becomes complex, such as managing an object with many nested properties, managing updates with useState can become cumbersome. Using useReducer might be a better alternative in such cases.

   Example with useReducer :

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const [state, dispatch] = useReducer(reducer, initialState);

2. Global State Management:

   If you have data that needs to accessed throughout your application(e.g., user authentication status, theme, language preferences), it’s better to avoid useState in individual components and instead use global state solutions like Context API or external libraries like Redux and Zustand.

3. Side Effects or Asynchronous Logic:

   If your state management involves side effects like fetching data from an API or interacting with external systems, it’s better to use useEffect in combination with useState rather than relying on useState alone.

4. Performance concerns with Frequent Updates:

   If you have frequent updates (such as animations or real-time data), using useState might cause unnecessary re-renders and impact performance. In such cases, tools like Ref (useRef) can be more effiecient as it doesn’t trigger re-renders.

Best Practices with useState

• Avoid Excessive Re-renders: Each time setState is called, the component re-renders. Try to minimize state changes to only what’s necessary.

• Batch Updates: React batches updates made in event handlers. So, multiple setState calls within the same handler will trigger only one re-render.

• Functional Updates: If you state update depends on the previous state, it’s better to use the functional form of setState.

setCount(prevCount => prevCount + 1);

Summary

When to use useState:

• Managing local state in functional components.

• Handling user input and UI interactions.

• Managing simple state logic within a single component.

When to avoid using useState

• When dealing with global state or shared data across multiple components.

• When the state logic becomes too complex or deeply nested.

• When performance might be affected by frequent re-renders (e.g., real-time updates).

• When handling asynchronous or side effects alone ( should be paired with useEffect).

Thankyou for reading! connect with me on X/Twitter 🙌