Notes flash after note update/creation

[Bonapara]

Description

Notes are flashing when creating or updating a note

https://github.com/twentyhq/twenty/assets/19412894/76d90c79-d913-42ea-80b1-e9cd479bda48

Where

Twenty (demo) workspace

How to reproduce

Go to a record page with existing notes and try to create a new one.

[greptile-apps[bot]]

Disclaimer: This comment was automatically generated with AI. It can give some useful hints as to where to look for, but sometimes it can also give very inaccurate answers so takes this with a pinch of salt :). To resolve the issue of notes flashing after update/creation, follow these steps:

1. Investigate useNotes Hook:

   • File: src/hooks/useNotes.js
   • Check the logic for fetching and updating notes. Ensure that state updates are batched correctly to prevent unnecessary re-renders.

2. Review Notes Component:

   • File: src/components/Notes.js
   • Look for the rendering logic and see if there are any forced re-renders or state changes that could cause the flashing.

3. Optimize State Management:

   • Ensure that the state is updated in a way that minimizes re-renders. Consider using React.memo or useCallback to optimize the component rendering.

4. Example Code Fix:

   // src/hooks/useNotes.js
   const updateNote = async (note) => {
     // Existing update logic
     // Add batching or debounce logic here if necessary
   };
   

   // src/components/Notes.js
   const Notes = React.memo(({ notes }) => {
     // Existing rendering logic
     // Ensure that the component only re-renders when necessary
   });
   

References

[H0onnn]

Hello, @Bonapara ! Please check PR #5469 :)

[Bonapara]

Hi @H0onnn, I'm not technical myself, but the tech team will look into it soon. Thanks!

[lucasbordeau]

Can't reproduce on main closing for now, don't hesitate to re-open.