2

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

4
  • I don't see any flickering happening. Might be a css issue
    – Near
    Mar 4, 2021 at 11:28
  • It's flickering on mobile browser tho. Mar 4, 2021 at 11:31
  • I have opened it on mobile as well. Don't see any issue there
    – Near
    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. Mar 4, 2021 at 11:37

1 Answer 1

3

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.

5
  • Well spotted +1 .. While you have a point here that using Redux for state-mgmt on big apps is very convenient, I think Redux makes life easier also with small apps as soon as some sort of state-mgmt is required - I wouldn't wanna miss it anymore..
    – iLuvLogix
    Mar 4, 2021 at 11:46
  • 2
    Thanks! I agree specially with Redux-Saga, applying logic there never seemed more convenient. However, for new developers it can be a little frustrating so I suggest Context API as its easy to use. Mar 4, 2021 at 11:59
  • True, it takes a while to wrap your head around redux-saga and hooks, but once you got the bigger picture it's awsome ;)
    – iLuvLogix
    Mar 4, 2021 at 12:09
  • Hey thanks for taking your time to answer my question ! Is there another way of doing it? I mean without state management. Mar 4, 2021 at 12:34
  • 2
    Then you'll have to keep the states only in relevant components instead on the top level App component, with this, if you have other components comunicating with each other you would have to go into "Prop Drilling" again which is not a good practice. If you go for Context its gonna take you ~2-3h to understand and implement it if you do not already know how to use it. Mar 4, 2021 at 12:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.