Hi, this PR introduces performance improvements and incorporates some best practices.
1) Change setState functions to update using callbacks. For example, instead of setShowRoomSettings(!showRoomSettings));, use setShowRoomSettings((prevShowRoomSettings) => !prevShowRoomSettings);. This change helps with automatic batching (as recommended in React 18) and is advised by the React JS team itself. For more information, please refer to the following links:
2) Moved independent functions outside the component, which reduces unnecessary memory usage, as their references won't change whenever the component updates.
3) Add decoding="async" to the img tag, which makes the development tool load faster and feel more responsive.
Hi, this PR introduces performance improvements and incorporates some best practices.
1) Change
setState
functions to update using callbacks. For example, instead ofsetShowRoomSettings(!showRoomSettings));
, usesetShowRoomSettings((prevShowRoomSettings) => !prevShowRoomSettings);
. This change helps with automatic batching (as recommended in React 18) and is advised by the React JS team itself. For more information, please refer to the following links:2) Moved independent functions outside the component, which reduces unnecessary memory usage, as their references won't change whenever the component updates.
3) Add
decoding="async"
to theimg
tag, which makes the development tool load faster and feel more responsive.