Filter common elements of two arrays with useEffect? I have these two states that consist in two arrays.
const bundle = [
  {
    id: 1,
    type: "schedule",
    action: "skip",
    target_action: "reset"
  },
  {
    id: 2,
    type: "schedule",
    action: "reset",
    target_action: "skip"
  },
  {
    id: 1,
    type: "check",
    action: "reset",
    target_action: "skip"
  },
  {
    id: 2,
    type: "check",
    action: "skip",
    target_action: "reset"
  }
];

const active = [
  {
    id: 1,
    type: "schedule",
    isActive: true
  },
  {
    id: 2,
    type: "schedule",
    isActive: false
  },
  {
    id: 1,
    type: "check",
    isActive: true
  },
  {
    id: 2,
    type: "check",
    isActive: false
  }
];

When items in active turns inactive (isActive: false) by clicking a button, they get filtered out of the array.
const handleActive = (item) => {
    setActive((prevState) => {
      
      const existingItem = prevState.find(
(activeItem) =>
activeItem.id === bundleItem.id &&
activeItem.type === bundleItem.type,
      );
      if (!existingItem) {
return [...active, { ...bundleItem, isActive: true }];
      }

      return prevState
.map((oldItem) => {
return oldItem.id === existingItem.id &&
oldItem.type === bundleItem.type
? { ...existingItem, isActive: !oldItem.isActive }
: oldItem;
})
.filter((itemToFilter) => itemToFilter.isActive);
    });
  };


Basically, I want to implement a useEffect that dynamically updates bundle in two ways simultaneously:

*

*items must have at least one of action or c_action keys

*when active gets updated (some elements get inactive and filtered out), I want to keep only the common items between the two arrays (same ID and type)

I implemented these two effects.
The first one to filter out the inactive elements from bundle:
React.useEffect(() => {
    setBundle((prevState) => {
      return bundle.filter((bundleItem) =>
active.some(
(activeItem) =>
activeItem.id === bundleItem.id &&
activeItem.type === bundleItem.type,
),
      );
    })
  }, [active]);

The other one to filter out from bundle elements that doesn't "action" or "c_action" key.
React.useEffect(() => {
    setBundle((prevState) => {
      return bundle.filter(
(bundleItem) => bundleItem.action || bundleItem.c_action
      );
    });
  }, [bundle]);


The second useEffect I implemented throws an infinite loop: bundle gets endlessly updated.
Thanks, a lot.

It seems to me that what you're looking for is actually an useMemo use case
you can do something like
const filteredBundle = useMemo(()=> bundle.filter(
(bundleItem) => bundleItem.action || bundleItem.c_action
      ),[bundle]);

And use the filtered bundle where makes sense