Performance Enhancements and Best Practices Implementation ✈

[sanjaiyan-dev]

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:

   • React 18 Upgrade Guide: https://react.dev/blog/2022/03/08/react-18-upgrade-guide#automatic-batching
   • Storing Information from Previous Renders: https://react.dev/reference/react/useState#storing-information-from-previous-renders

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.