PLEASE, stop using

 useSelector(state => state.mainReducer);

it doesn't make any sense

there should be a simple state transformation (subselection)

const a = useSelector(state => state.a)

taken directly from redux docs:

const counter = useSelector(state => state.counter)  

update

you can see effect (from store change) with slightly changed component

function MyComponent(props) {
  const a = useSelector(state => state.a);
  const dispatch = useDispatch(); 

  console.log('render: ', a);

  useEffect(() => {
    console.log('use effect: ', a);
    dispatch({ type: 'A', payload: a });
  }, [a]) 

  useEffect(() => {
    console.log('did mount: ', a);
    dispatch({ type: 'A', payload: 1 })
  }, []); 

  return (<View style={styles.container}>
    <Text style={styles.text}>{a}</Text>
  </View>);
};

It should result in log:

• render: 0 // initial state
• use effect: 0 // first effect run
• // dispatch 0 ... processed in store by reducer but results in the same state ...
  // ... and in our rendering process we still working on an 'old' a readed from state on the beginning of render
• did mount: 0 // 'old' a
  // dispatch 1 ... changed state in redux store

• .... rendered text 0
  ...
  ...

• // useSelector forces rerendering - change detected

• render: 1 // latest dispatched value, processed by reducers into new state, rereaded by selector
• use effect: 1 // useEffect works AS EXPECTED as an effect of a change
• .... rendered text 1

...
...

• no more rerenderings - latest dispach not changed state

Of course dispatch from other component will force update in this component ... if value will be different.

There are very good options for state management librariess if you are creating a new app or have enough flexibility. Check out Recoil.

Just for completeness:

1. (Stopped working) Use function as useEffect callback

useEffect(fetchBusinesses, [])

2. Declare function inside useEffect()

useEffect(() => {
  function fetchBusinesses() {
    ...
  }
  fetchBusinesses()
}, [])

3. Memoize with useCallback()

In this case, if you have dependencies in your function, you will have to include them in the useCallback dependencies array and this will trigger the useEffect again if the function's params change. Besides, it is a lot of boilerplate... So just pass the function directly to useEffect as in 1. useEffect(fetchBusinesses, []).

const fetchBusinesses = useCallback(() => {
  ...
}, [])
useEffect(() => {
  fetchBusinesses()
}, [fetchBusinesses])

4. Function's default argument

As suggested by Behnam Azimi

It's not best practice, but it could be useful in some cases.

useEffect((fetchBusinesses = fetchBusinesses) => {
   fetchBusinesses();
}, []);

5. Create a custom hook

Create a custom hook and call it when you need to run function only once. It may be cleaner. You can also return a callback to reset re-run the "initialization" when need.

// customHooks.js
const useInit = (callback, ...args) => {
  const [mounted, setMounted] = useState(false)
  
  const resetInit = () => setMounted(false)

  useEffect(() => {
     if(!mounted) {
        setMounted(true);
        callback(...args);
     }
  },[mounted, callback]);

  return [resetInit]
}

// Component.js
return ({ fetchBusiness, arg1, arg2, requiresRefetch }) => {
  const [resetInit] = useInit(fetchBusiness, arg1, arg2)

  useEffect(() => {
    resetInit()
  }, [requiresRefetch, resetInit]);

6. Disable eslint's warning

Disabling warnings should be your last resort, but when you do, better do it inline and explicitly, because future developers may be confused or create unexpected bugs without knowing linting is off

useEffect(() => {
  fetchBusinesses()
}, []) // eslint-disable-line react-hooks/exhaustive-deps

more or less the same, but you wouldn't do either of these things. you'd use the useEffect with a dependency array that has count.

otherwise you're doing unnecessary work. say this Example components' parent rerenders which causes Example to rerender, now we're changing the document title even though count never changed.

Suppress the linter because it gives you a bad advice. React requires you to pass to the second argument the values which (and only which) changes must trigger an effect fire.

useEffect(() => {
    animateSomething(ref, props.onAnimationComplete);
}, [props.foo]); // eslint-disable-line react-hooks/exhaustive-deps

It leads to the same result as the Ryan's solution.

I see no problems with violating this linter rule. In contrast to useCallback and useMemo, it won't lead to errors in common case. The content of the second argument is a high level logic.

You may even want to call an effect when an extraneous value changes:

useEffect(() => {
    alert(`Hi ${props.name}, your score is changed`);
}, [props.score]);

If your functions or methods are going to be called only for one time then it's better to declare and invoke the function in the same useEffect hook.

For Example:-

 useEffect(() => {
    const options = {
      weekday: "long",
      year: "numeric",
      month: "long",
      day: "numeric",
    };
    const getCurrentDate = () => {
      let date = new Date();
      setDate(date.toLocaleDateString("en-us", options));
    };

    getCurrentDate();
  }, []);

As the above code shows try to include the functions or methods inside your useEffect hook or else if you want to try to add some dependency which can be variable that when that changes your useEffect will trigger again.