Fix waste render on connectivity status

[compulim]

Fixes #2418.

Changelog Entry

Fixed

• Fix #2418. Connectivity status should not waste-render every 400 ms, by @compulim in PR #2419

Description

DebouncedConnectivityStatus is causing wasted render for every 400 ms.

Specific Changes

This is due to misunderstanding of useState for assigning a function.

Instead of,

const [predicate, setPredicate] = useState();

setValue(x => x === 'Hello, World!');

It should be,

const [predicate, setPredicate] = useState();

setValue(() => x => x === 'Hello, World!');

This is because, if function is passed to setXXX, React will call the function with the existing value, and use the return value as the new state. If non-function is passed, React will directly set it as new state. This behavior is currently not documented.

---

• Testing Added
  • We currently do not have a way to detect how many render done per seconds, etc. We should setup this tool.

[coveralls]

Coverage increased (+0.07%) to 65.306% when pulling 8884da2 on compulim:fix-2418 into 5bf82c3 on microsoft:master.

[tdurnford]

LGTM