[useToast] Warning: React has detected a change in the order of Hooks called by AnimatePresence.

I have this weird error inside my app when I try to use a toast and I cannot pin down the cause of it.

Everytime I am trying to display a toast I get a change of hooks order error, but inside framer-motion.

I tried to come up with a minimal reproduction, but failed to do so. But maybe someone here sees what the issue is immediately.

🐛 Bug report

I am using useToast just like describe in the docs. To make sure that I didn’t accidentally override something, I put the toast usage inside my App.tsx

// App.tsx
import React, { useState, StrictMode, useEffect } from "react";
import { useHotkeys } from 'react-hotkeys-hook';
import { FpsView } from 'react-fps';
import {
  ChakraProvider,
  extendTheme, useToast
} from "@chakra-ui/react";
import 'focus-visible/dist/focus-visible';
import useFaviconWatcher from "./hooks/ui/global/useFaviconWatcher";

const config = {
  useSystemColorMode: false,
  initialColorMode: 'dark' as 'dark',
};

const customTheme = extendTheme({ config });

function App() {
  const [showFpsMeter, setShowFpsMeter] = useState(false);
  useHotkeys('shift+f', () => setShowFpsMeter((currVal) => !currVal));
  useFaviconWatcher();
  const toast = useToast();

  useEffect(() => {
    toast({
      title: 'Reported issue',
      description: 'Thank you for taking time out of your creative day to help us.',
      status: 'success',
    });
  }, [toast]);

  return (
    <StrictMode>
      <ChakraProvider theme={customTheme}>
        {showFpsMeter && <FpsView />}
      </ChakraProvider>
    </StrictMode>
  );
}

export default App;

There is nothing else going on, the FpsView does neither use chakra nor framer-motion. I don’t really understand why this would happen.

🌍 System information

Software	Version(s)
Chakra UI	1.3.2
Browser	Chrome 88.0.4324.150
Operating System	macOS 10.15.7

📝 Additional information

This is my package.json:

"dependencies": {
    "@apollo/client": "3.3.9",
    "@chakra-ui/react": "1.3.2",
    "@emotion/react": "11.1.5",
    "@emotion/styled": "11.1.5",
    "@inlet/react-pixi": "6.0.9",
    "axios": "0.21.1",
    "array-move": "3.0.1",
    "color-interpolate": "1.0.5",
    "detect-browser": "5.2.0",
    "framer-motion": "3.3.0",
    "fuse.js": "6.4.6",
    "graphql": "15.5.0",
    "hotkeys-js": "3.8.2",
    "lodash": "4.17.20",
    "piano-utils": "0.1.0",
    "pixi.js": "5.3.7",
    "react": "17.0.1",
    "react-click-away-listener": "2.0.0",
    "react-color": "2.19.3",
    "react-dom": "17.0.1",
    "react-dropzone": "11.3.1",
    "react-fps": "1.0.4",
    "react-hotkeys-hook": "3.0.3",
    "react-icons": "4.2.0",
    "react-movable": "2.5.3",
    "react-piano": "3.1.3",
    "react-router-dom": "5.2.0",
    "react-scripts": "4.0.2",
    "react-split": "2.0.9",
    "react-window": "1.8.6",
    "recoil": "0.1.2",
    "subscriptions-transport-ws": "0.9.18",
    "tinycolor2": "1.4.2",
    "uniqid": "5.2.0",
    "web-vitals": "1.1.0",
  },
  "devDependencies": {
    "@storybook/addon-actions": "6.1.17",
    "@storybook/addon-essentials": "6.1.17",
    "@storybook/addon-links": "6.1.17",
    "@storybook/preset-create-react-app": "3.1.5",
    "@storybook/react": "6.1.17",
    "@types/dom-mediacapture-record": "1.0.7",
    "@types/lodash": "4.14.168",
    "@types/react": "17.0.1",
    "@types/react-color": "3.0.4",
    "@types/react-dom": "17.0.0",
    "@types/react-router-dom": "5.1.7",
    "@types/react-window": "1.8.2",
    "@types/resize-observer-browser": "0.1.5",
    "@types/tinycolor2": "1.4.2",
    "@types/uniqid": "5.2.0",
    "@testing-library/jest-dom": "5.11.9",
    "@testing-library/react": "11.2.5",
    "@testing-library/react-hooks": "5.0.3",
    "@testing-library/user-event": "12.6.3",
    "@welldone-software/why-did-you-render": "6.0.5",
    "storybook-addon-apollo-client": "4.0.6",
    "typescript": "4.1.3"
  },

[adampapl]

I had the same issue. Turned out the reason was @welldone-software/why-did-you-render package I use. My guess is any other re-render tracking code may cause the same issue.

[JoeVanGundy]

I had the same issue. Turned out the reason was @welldone-software/why-did-you-render package I use. My guess is any other re-render tracking code may cause the same issue.

Thanks so much for this tip! This was the fix for us!