redwood icon indicating copy to clipboard operation
redwood copied to clipboard

chore(react): use `updater` callback function

Open virtuoushub opened this issue 2 years ago • 2 comments

callback takes the previous state as the first argument.

setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall. Instead, use componentDidUpdate or a setState callback (setState(updater, callback)), either of which are guaranteed to fire after the update has been applied. If you need to set the state based on the previous state, read about the updater argument below.

see:

  • https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-access-state-in-setstate.md
  • https://reactjs.org/docs/react-component.html#setstate

Closes #5627

virtuoushub avatar Sep 18 '22 20:09 virtuoushub

Seeing some odd test failures. Seems like maybe a flakey test?

...
  ● can display a loading screen with a hook

    Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

      90 |       if (loadingTimeMs) {
      91 |         setTimeout(() => {
    > 92 |           setAuthLoading(false)
         |           ^
      93 |           setAuthIsAuthenticated(true)
      94 |         }, loadingTimeMs)
      95 |       }
...

https://github.com/redwoodjs/redwood/actions/runs/3101321311/jobs/5022567567#step:8:1475

virtuoushub avatar Sep 21 '22 23:09 virtuoushub

Still seeing some odd test results: https://github.com/redwoodjs/redwood/actions/runs/3101811253/jobs/5023535465#step:8:1287

...
● redirect replacing route

    Unable to find an element with the text: Home Page. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

    Ignored nodes: comments, script, style
    <body>
      <div>
        <h1>
          List Page
        </h1>
      </div>
    </body>

      1397 |   act(() => back())
      1398 |   // without options.replace = true in Redirect, back would go to List Page
    > 1399 |   await waitFor(() => screen.getByText('Home Page'))
           |         ^
      1400 | })
      1401 |
      1402 | describe('trailing slashes', () => {

      at waitForWrapper (../../node_modules/@testing-library/dom/dist/wait-for.js:187:27)
      at Object.<anonymous> (src/__tests__/router.test.tsx:1399:9)
...

not quite sure what is going on, but this one seems like an actual regression.

virtuoushub avatar Sep 22 '22 00:09 virtuoushub

not quite sure what is going on, but this one seems like an actual regression.

All tests passed now, so I went ahead and merged. I've not been all to happy about the state of our regression tests lately though, randomly failing more often than not 🙁 So I think it's probably worth it soon to see if we can do something about that

Tobbe avatar Sep 22 '22 12:09 Tobbe

not quite sure what is going on, but this one seems like an actual regression.

All tests passed now, so I went ahead and merged. I've not been all to happy about the state of our regression tests lately though, randomly failing more often than not 🙁 So I think it's probably worth it soon to see if we can do something about that

+💯 - As a small related aside, I have found my work on #4992 is rife w/ what look to be test failures due to flakey / poorly written tests.

virtuoushub avatar Sep 22 '22 17:09 virtuoushub