app-project: React Hooks error in WorkflowAssignmentModal

[eatyourgreens]

Package

• app-project

Describe the bug

Spotted while running the tests for the project app. There's a useState hook that appears to run conditionally.

Component > StandardLayout
Warning: React has detected a change in the order of Hooks called by WorkflowAssignmentModal. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useRef                     useRef
2. useDebugValue              useDebugValue
3. useSyncExternalStore       useSyncExternalStore
4. useContext                 useContext
5. useContext                 useContext
6. useCallback                useCallback
7. useState                   useState
8. useRef                     useRef
9. useEffect                  useEffect
10. useRef                    useRef
11. useEffect                 useEffect
12. useEffect                 useEffect
13. useState                  useContext
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    at WorkflowAssignmentModal (/Users/jimodonnell/zooniverse/front-end-monorepo/node_modules/mobx-react-lite/dist/mobxreactlite.cjs.development.js:247:12)
    at main
    at I (/Users/jimodonnell/zooniverse/front-end-monorepo/node_modules/styled-components/dist/styled-components.cjs.js:1:19114)
    at /Users/jimodonnell/zooniverse/front-end-monorepo/node_modules/grommet/components/Box/Box.js:22:24
    at div

To Reproduce

Run the tests for the project app and check the output for StandardLayout. The tests break the rules of hooks, but still pass, so it's easy to miss this error. I only noticed it because it generated a large block of red text in the terminal, and I happened to be watching when the tests ran.

Expected behavior

React hooks have to run in the same order during every render of a component. Breaking the rules of hooks should probably fail the CI tests.