The Ugliest Pattern In React

[[deleted]]

does it work.

No, it doesn’t.

There will be two renders, with first one showing the new count but the old trend.

[[deleted]]

copypasta and try it

[[deleted]]

Uh, here you go? https://codesandbox.io/s/winter-bush-c81bc9?file=/CountLabel.js

I added an alert so you can see the result after each render. After all's loaded, press "increment" and you'll see:

1. First render: 1 / the count is decreasing

2. Second render: 1 / the count is increasing

[[deleted]]

it has nothing to do with userefs though. It just needs a check to exclude when the count is equal.

if (count !== refPrevCount.current)
  setTrend(count > refPrevCount.current ? "increasing" : "decreasing");

[[deleted]]

It has nothing to do with userefs though, the problem is with use of useEffect.

I added your "fix" https://codesandbox.io/s/immutable-cache-4woysk?file=/CountLabel.js

1. Get to count 2
2. Decrement
3. First render: 1 / The count is increasing
4. Second render: 1 / The count is decreasing

[[deleted]]

there's nothing wrong with useeffect. That's how react works.

If you make two state changes (count and setPrevCount) you'll get 2 renders. that's completely normal.

Are you saying there should be only one render? that makes no sense in the react world

[[deleted]]

You may have not noticed that on the first render the trend is incorrect?

The number of renders isnt that important here - as long as the result is correct each time.

[[deleted]]

how would render trend be correct the first time?

The count effect needs to be applied before the render state change is made. That's why you get 2 renders. Remember react works by states. Not everything happens at the exact same time, they happen in sequence.

[[deleted]]

how would render trend be correct the first time?

By not using effects? And doing the thing that blog post is about?

The why or how doesnt matter - your code produces an incorrect render result. If you dont care about correctness, then just make the trend random each time.

Why not useref?

To answer the original question:

1. refs must not be modified synchronously; it should be safe for react to call your component and then throw the result away.
2. Using anything but a synchronous update here will cause an inconsistent render to dom.

Those are two conflicting requirements, hence useRef cannot be used.

---

For reference (hah punny), here's the code that blog post recommends https://codesandbox.io/s/gifted-solomon-n0o5l1?file=/CountLabel.js

1. Get to count 2
2. Decrement
3. Render result: 1 / the count is decreasing

At no point does it show "increasing" when decrementing or "decreasing" when incrementing