Updating the state of the Home Page component from a IonModal getting a useEffect error

I have an IonModal that I’m using to add data to my database through an API call. I will then add the response data to a list in my Redux store which is being displayed on the Home Page.

This function is being called on a button press within my modal to call the API, get the response, add it to the store, and close the modal:

const addData = async () => {
  const transaction = await createTransaction(data);

createTransaction is calling the API and returning the response data.

When it is called and the modal is closed I am getting this error

Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

In my Home page all I have is a simple useEffect that sets the state within the component to the state within the redux store and should update displayed content within the component but isn’t:

const transactions = useSelector(state => state.transactions);
const [data, setData] = useState([]);

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

The data does get successfully added to the Redux Store but it just doesn’t get updated visually on the home page.

Any help or advice would be very much appreciated.

need to see more code… where is the modal component? where is the call to addData being done?

Here is some react code to replicate it

Although the error message goes away with this the state still isn’t being updated on the home page. I suspect it has something to do with the component not being loaded when the state changes but then I don’t know how I would make it update.

To replicate just create a basic ionic app, add in these files, install the missing packages (axios, redux, react-redux), wrap the App in index.ts in a redux Provider, and you should be good.

Home Page

export default function Home(): ReactElement {
  const quotes = useSelector((state: any) => state.quotes);
  const [data, setData] = useState([]);

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

  return (
      <IonContent fullscreen>
        <Modal />
        {data.map((q: any) => {
          return <p key={q?._id}>{q?.content}</p>;


export default function Modal(): ReactElement {
  const [showModal, setShowModal] = useState(false);
  const dispatch = useDispatch();

  const getData = async () => {
    const quote = await axios.get("https://api.quotable.io/random");

  return (
      <IonButton onClick={() => setShowModal(true)}>Open Modal</IonButton>
      <IonModal isOpen={showModal} onDidDismiss={() => setShowModal(false)}>
        <IonButton onClick={() => getData()}>Get Data</IonButton>


export const initialState = [];

export const quotesReducer = (state: any[] = initialState, action: any) => {
  switch (action.type) {
    case "ADD_QUOTE": {
      const temp = state;
      return temp;
      return state;

export const addQuote = (quote: string) => {
  return { type: "ADD_QUOTE", payload: quote };

const reducer = combineReducers({
  quotes: quotesReducer,

export const store = createStore(reducer);