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.