Only reset errors if there are errors

[andrewhassan]

#gsd:39776

WHY are these changes introduced?

Fixes https://github.com/Shopify/shopify-functions/issues/364

WHAT is this pull request doing?

Because React re-renders when a state changes (by reference), every time we received a successful request, we were setting the errors array. We poll roughly twice a second, which meant that we are performing a ton of unnecessary re-renders, causing flickering.

How to test your changes?

1. Run app logs
2. Trigger enough function runs so that your terminal has to scroll

With this change, there should be no flickering and it should be easy to copy your function run output.

Measuring impact

How do we know this change was effective? Please choose one:

• n/a - this doesn't need measurement, e.g. a linting rule or a bug-fix
• Existing analytics will cater for this addition
• PR includes analytics changes to measure impact

Checklist

• I've considered possible cross-platform impacts (Mac, Linux, Windows)
• I've considered possible documentation changes

[github-actions]

Thanks for your contribution!

Depending on what you are working on, you may want to request a review from a Shopify team:

• Themes: @shopify/advanced-edits
• UI extensions: @shopify/ui-extensions-cli
  • Checkout UI extensions: @shopify/checkout-ui-extensions-api-stewardship
• Hydrogen: @shopify/hydrogen
• Other: @shopify/app-management

[github-actions]

Coverage report

St.❔	Category	Percentage	Covered / Total
🟡	Statements	72.62% (+0.11% 🔼)	7914/10898
🟡	Branches	69.4% (+0.06% 🔼)	3887/5601
🟡	Functions	71.34% (+0.04% 🔼)	2078/2913
🟡	Lines	72.95% (+0.12% 🔼)	7478/10251

Test suite run success

1806 tests passing in 822 suites.

Report generated by 🧪jest coverage report action from 4486ea6

[github-actions]

We detected some changes at either packages/*/src or packages/cli-kit/assets/cli-ruby/** and there are no updates in the .changeset.
If the changes are user-facing, run "pnpm changeset add" to track your changes and include them in the next release CHANGELOG.

[lopert]

🎩 worked for me, didn't see any flickering and was able to scroll and select

[lopert]

I don't really get how this fixed the issue?
Before, we were always setting the state to [] which caused the refresh.
Now, we're either setting the state to [] or errors, either of which should cause the refresh again?

I did some searching of the useState docs, but it's not clear to me if providing a "updater" function also gets us a behaviour of "if the state hasn't changed, then don't update it".

[andrewhassan]

React re-renders if a state changes, and the way it determines if the state changed is by reference. When we setState([]), we're setting the state with a new array. Although the contents are the same, the reference is not, so React re-renders, causing the flickering.

To avoid this, we want to reset the errors only if there are already errors. Ideally, we'd do something like this:

if (errors.length) {
  setErrors([])
}

But the problem with that is that errors inside this function actually refers to the initial errors array, not the current value! So we can't simply reset the errors based on the current errors value.

Luckily, React exposes the current value through the setter updater function. I use that current value to decide what we should do. If there are errors, then we set the state to [], triggering a re-render. If there aren't errors, we set the state to the exact same reference, which does not trigger a re-render.