Today I Learned

7 posts by arkadiuszmachalica

React Optimization of lists in big components

Big or often rerendering component which displays list of elements, can be optimized by extracting the list to separate component and using React.memo.

In example below it provided 40x speed improvement. YMMV of course.

In the examples I have provided different stages and mistakes this optimization. They also help understand why are useMemo and useCallback hooks useful.

react optimalization examples

Using Light Sensor in Google Chrome

Light Sensor needs to be enabled in Chrome: go to: chrome://flags/#enable-generic-sensor-extra-classes and enable it.

Then you will be able to get sensor readings

const sensor = new AmbientLightSensor();
sensor.start();
sensor.addEventListener('reading', () => {
  console.log(sensor.illuminance);
});

There are also activate and error events on the sensor object that can be listened to.

Full article: https://blog.arnellebalane.com/using-the-ambient-light-sensor-api-to-add-brightness-sensitive-dark-mode-to-my-website-82223e754630

Debug prod app with logpoints & conditional breakpoints

Recently we were able only to use breakpoints to inspect code execution in the production application. But if the code in which we put breakpoint is triggered multiple times we have to resume the execution. To prevent that, we can use conditional breakpoints https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#conditional-loc

In cases when we do not want to break the execution of the code but just log some value we can use logpoints. https://developers.google.com/web/updates/2019/01/devtools#logpoints