Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to know the trigger of an useEffect to make a conditional with it?

I have an useEffect with 2 states in the dependancies array that is something like this:

const [currentTab, setCurrentTab] = useState('open');
const [searchParams, setSearchParams] = useState('');

 useEffect(() => {
  if (condition) {
    // useEffect logic
    } else {
     return;
 }, [currentTab, searchParams]);

But I want that this conditional be applied only if the trigger of the useEffect was the currentTab, else if the trigger was the searchParams I’d like to run this useEffect logic without any conditions. What is the best approach to solve this?

I’ve already tried splitting it in two different useEffects for each state in order to doing conditional in only one but didn’t worked either bc this way would run both useEffects when the component mounts and that’s not the expected.

Tags:

2

Answers


  1. 0

    You can try using useRef to keep previous currentTab value

    const [currentTab, setCurrentTab] = useState('open');
const [searchParams, setSearchParams] = useState('');
const prevTab = useRef(currentTab);

useEffect(() => {
   isTabNotChanged = currentTab === prevTab.current
   if (isTabNotChanged || condition) {
     // useEffect logic
   }
   prevTab.current = currentTab;
}, [currentTab, searchParams]);

    But I’m not sure there isn’t a way to make the component logic more straightforward. Perhaps there is a better way to organise the code. For example (no sure if you can apply it in your app), you can change the key prop of a component, which will cause the component to be re-rendered from scratch.

    Login or Signup to reply.
  2. 0

    You can achieve this by using a single useEffect hook with a conditional statement inside it. You can check which state has changed using the useState setter function’s previous value. Here’s an example:

    import { useState, useEffect } from 'react';

const [currentTab, setCurrentTab] = useState('open');
const [searchParams, setSearchParams] = useState('');

useEffect(() => {
  const prevCurrentTab = useState[0]; // get the previous value of currentTab
  const prevSearchParams = useState[1]; // get the previous value of searchParams

  if (currentTab !== prevCurrentTab && condition) {
    // useEffect logic when currentTab changes and condition is true
  } else if (searchParams !== prevSearchParams) {
    // useEffect logic when searchParams changes (no condition)
  }
}, [currentTab, searchParams]);`

    This way, you can apply the conditional logic only when the currentTab state changes and skip it when the searchParams state changes.

    Note: useState[0] and useState[1] are used to access the previous values of currentTab and searchParams respectively. This is a common pattern when working with multiple states in a single useEffect hook.

    Also, make sure to add the necessary dependencies in the useEffect array to ensure it runs when the states change.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search