search

melloware / react-logviewer

React Lazy LogViewer
https://melloware.github.io/react-logviewer/
Mozilla Public License 2.0
45 stars 10 forks source link

fix: make handleUpdate work properly with React batched updates #22

Closed Leksat closed 6 months ago

Leksat commented 6 months ago

It was noticed that LazyLog does not work properly with websockets on recent React versions.

My websocket is sending multiple messages immediately after the connection is opened. Yet I observed only the first and the last message rendered in the component.

I tracked it down to handleUpdate:

However, as mentioned in the pitfall section of the setState documentation, this.setState does not update the state immediately. So most of the handleUpdate calls were getting an outdated state.

The PR fixes this by moving most of the handleUpdate code into a this.setState callback.

melloware commented 6 months ago

@Leksat fantastic PR! Let me merge this and push 5.0.4 to NPM

melloware commented 6 months ago

5..0.4 is in NPM repository! Thank you for your contribution!

melloware commented 5 months ago

@Leksat we are investigating an issue we are seeing in our app not using WebSocket where the log lines are duplicated after this PR. If we revert to 5.0.3 its back to working.

image

Strict mode does a Mount, UnMount, Mount. When running in Non Strict mode (aka Production Mode) we only get the correct log lines.

melloware commented 5 months ago

@Leksat i left your change in place for websockets but for plain text mode I put it back the way it was.

See: https://github.com/melloware/react-logviewer/commit/03d35c0464cf8dfb08a7071c81134170aa00a253