React Re-Render Causes Flickering : How can i fix this?

Question

I'm new in coding and i couldn't get how to fix the issue after i googled many times. The issue is i have a layout component which contains 4 different components. When i call a function in a function component it affects the others and the others re-render. Re-render is fine tho however my images are flickering on mobile browser. I would like to remove the flickering of the image loading. I've tried using React.memo() and useCallBack() but both of them didn't work for me. I hope I made myself clear, thanks in advance

This is my app https://stackblitz.com/github/mithatercann/qrmenu

Answer 1

You are using what's its called "Prop Drilling". The better solution for your current problem is to implement some state management in your app, they are many third libraries for that, but for this instance and if your app is small you can use React Context API . If you're going to build big apps then I recommend implementing Redux .