1. This is happening because due to the fact that you're using a part of the Redux state (i.e. the posts which you extract from Redux store using useSelector), your component will automatically re-render when the state changes.

2. However, each time you are mounting your component, you are also calling the dispatch method in your useEffect that changes the Redux store and causes your component to re-render.

3. Again, during the re-render, your useEffect runs the dispatch function that causes a Redux store update which in turn causes yet another re-render and this is how you've gotten caught up in an infinite loop of re-renders and Redux store updates

4. A solution to this might be to only run dispatch only when the payload changes by running the useEffect exclusively when payload changes and not when component mounts

5. You can use the following code for the same :

useUpdateEffect - custom react hook that will only run when dependencies change

import { useEffect, useRef } from "react"

export default function useUpdateEffect(callback, dependencies) {
  const firstRenderRef = useRef(true)

  // Since ref persists value between renders (and itself doesn't trigger a render when value is changed), we can simply just set ref to a failing condition on our 1st render so that component only is re-rendered when dependencies change and not also "onMount"
  useEffect(() => {
    if (firstRenderRef.current) {
      firstRenderRef.current = false
      return
    }
    return callback()
  }, dependencies)
}

Using the useUpdateEffect hook in our code :

  const dispatch = useDispatch();

  useUpdateEffect(() => {
    dispatch(fetchPostsByTerm(payload));  
  }, [payload])

  const posts = useSelector((state) => state.postsByTerm);

  return (
    <div>
      <h1 className="post_heading">Posts</h1>
      {posts ? posts.map((post) => <h1>{post.entityLable}</h1>) : <h1>no posts</h1>}
    </div>
  );
};

Okay, I figure it out, one of my types in the Reducer rested de inscriptions to and empty array, so it was re-rendering infinitely.

My understanding of useEffect monitoring should be that when the data is changed, he will re-execute the code in useEffect.

Your understanding of the useEffect hook is correct, but you are not understanding that your useSelector hook is potentially returning a new array object reference each time the component renders. In other words, data is a new reference that triggers the useEffect hook to run. The useEffect hook enqueues a list state update. When React processes the list state update it triggers a component rerender. data is selected and computed from the Redux store. Repeat ad nauseam.

You can help break the cycle by using an equality function with the useSelector hook. See Equality Comparisons and Updates.

import { shallowEqual, useSelector } from 'react-redux';

...

const data = useSelector((state: DeviceList) => {
  if (state.basicSetting !== null) {
    return state.basicSetting.filter(
      item =>
        item.deviceName.includes('ac') &&
        !item.deviceName.includes('bz'),
    );
  } else {
    return null;
  }
}, shallowEqual); // <-- shallow equality instead of strict equality

Another good solution is to create a memoized selector function from Reselect, and since you are using Redux-Toolkit, createSelector is re-exported from Reselect. (Reselect is maintained by the same Redux/Redux-Toolkit developers)

It allows you to write the same computed data value but it memoizes the result so that if the selected state going into the selector hasn't changed, then the selector returns the same previously computed value. In other words, it provides a stable returned data value that will only trigger the useEffect when state actually updates and the selector computes a new value reference.

However, it is a bit unclear why you are selecting state from the store and duplicating it locally into state. This is generally considered a React anti-pattern. You can compute the list value directly from the store.

Example:

const list = useSelector((state: DeviceList) => {
  if (state.basicSetting === null) {
    return null;
  }
  
  const data = state.basicSetting.filter(
    item =>
      item.deviceName.includes('ac') &&
      !item.deviceName.includes('bz'),
  ) as DeviceDataOne[];

  const list: DeviceDataOne[] = [];
  while (data.length) {
    list.push(data.splice(0, 4));
  }
  return list;
});

useEffect(() => {
  console.log('list', list);
}, [list]);

The problem is that your selector always returns a new reference (because of the call to map). You could instead use createSelector which will memoize it and only return a new reference when something inside either allIds or byId changes:

const selectAllCategories = createSelector(
    (state: AppState) => state.categories.allIds,
    (state: AppState) => state.categories.byId,
    (categoriesIds, categoriesById) => categoriesIds.map((id) => categoriesById[id.toString()])
);

But ideally you should avoid such selectors that go through the whole byId object, because it kind of negates the benefits of having a normalized state. You should rather have a parent component that only selects state.categories.allIds, and then passes the ids as props to child components, and every child component will select its own state.categories.byId[id]. This way if a category changes, only the corresponding child component will rerender, instead of having the parent and all of the children rerender.

Just get the id from the history > match

  const { history, match } = props;  
  const id = match ? match.params.id : null;

You don't need to add dispatch to the dependencies. Instead of match, use id. And you can skip the method references. Since setValues is basically a setState call, it can be skipped too (Read React docs). But if you do want to use any function references in dependecies, make sure you wrap them with useCallback.

  useEffect(() => {
    if (id) {
      dispatch(actGetProductRequest(id));
    }
    setValues(()=>({...getProduct}));
  },[id, getProduct]); 

Your main issue might be with the match object. Since, history keeps changing, even if the id is the same.

Solved

Sooooo Redux has a few store methods; dispatch being one of them. For me, the store method I was looking for was getState. More info if you look here and cmd/ctrl + F 'getState'

I didn't think I could access the state within my slice because React would not allow me to use useSelector within the slice for obvious reasons. What was not obvious to me at the time was that I could gain access with getState

So, the edited code would look like:

1. remove the facets param within the component because I won't need it anymore

function Component () {
    //const facets = useSelector(getFacets) --> NO LONGER NEEDED

    useEffect(() => {
        dispatch(search(/*facets, */param2, param3))
    }, [dispatch, /*facets, */param2, param3])
    
    //rest of component with return
}

2. edit the function within the slice, removing the facets param and including getState alongside dispatch

//Inside my slice
const search = (param2, param3) => async(dispatch, getState) => {
   //do a fetch using param2 and param3
   //fetch comes back with a facets object
   //grab 'old' facets using NEW getState and same selector: getFacets
   oldFacets = getFacets(getState())
   //alter response facets object based on oldFacets
   dispatch(setFacets(newFacets)) // set the new facets
}

Voila, no more infinite loop.

You should use useEffect, code below is equivalent to componentDidMount.

useEffect(() => {    Some code}, [])

If you need to get the list only in the initial render, leave the dependency array empty, so it will only invoke once

useEffect(() => dispatch(getList()), []);

Otherwise, your fetch will mutate the billingCycles causing re-render over again which ended up with an infinite loop.

More on that here