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 ponent which contains 4 different ponents. When i call a function in a function ponent 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

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 ponent which contains 4 different ponents. When i call a function in a function ponent 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./github/mithatercann/qrmenu

• javascript
• reactjs

• I don't see any flickering happening. Might be a css issue – Near Commented Mar 4, 2021 at 11:28
• It's flickering on mobile browser tho. – Mithat Ercan Commented Mar 4, 2021 at 11:31
• I have opened it on mobile as well. Don't see any issue there – Near Commented Mar 4, 2021 at 11:33
• It seems fine on android but it's flickering on ios . I didn't understand how it's possible. – Mithat Ercan Commented Mar 4, 2021 at 11:37

1 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 remend implementing Redux.