So we have a primereact components based app,
and the problem occurs when triggering the show of an overlay component
(usually a Dialog, but I've noticed it could also happen with Sidebar),
in a specific page that concerns with showing a table and the basic crud associated with it,
we show the form to create/update inside a Dialog,
when clicking the appropriate button the dialog shows..
only sometimes the dialog crashes and this error shows:
this have been happening for a very long time, and there were many attempts,
not even to fix it, but just to get the bug re-produced consistently.
couldnt do it...
of course tried finding a setState that could get stuck in a loop
any help would be appreciated :)
Related
I am currently using TanStack React Query to make an UI and I have an issue when I invoke queryClient.removeQueries(queryKey) clicking on a button.
The issue is that every click I do, the display flickers once. The cache is correctly cleaned but the flicker is annoying.
Is this a normal behaviour? I would like to solve it.
Thanks in advance!
I have an app where the user can download a photo. After downloading it, I want to display a small message saying "Download successful". Initially I wanted to show Modal from https://reactnative.dev/docs/modal but then I wanted this info to disappear either in 5 sec, or if the user taps outside of the modal. So I thought I should wrap my Modal inside an Animated component https://reactnative.dev/docs/animations
Am I on the right track? Is this the way to show a user friendly message - wrapping modal inside animated. Or there is another component which I can use?
I think it will be better if you use SnackBar for such purposes.
You can use any snackbar library in your project. Your wrap it around with your project, Then whenever you need to throw information message or error message you just called the hook for that snackbar. Also it will automatically disappear after showing the message. you won't need to take care of seconds.
notistack package : https://www.npmjs.com/package/notistack
You can also checkout the Material UI Alerts.
I created a screen whose information is taken entirely from the database by APIs.
It has now been made so that all parts are loaded in 'componentWillMount' Lifecycle, and this has caused the loading speed of my screen to be very time consuming.
I want to design the screen in such a way that when the user scrolls down, it is checked whether the component appears on the screen or not. So if the desired component appears after scrolling down, I can call the functions of that component and get the information of that part from the APIs.
I do not know how to do this.
What is the best way to do this? Is there a library that can do this for me?
I spent about 2 hours searching for this goal but to no avail.
I also found libraries for ReactJS that unfortunately can not be used in React Native.
Thank you in advance for your support.
I am trying to implement a page where top part of page is static and bottom part keeps on changing. I was able to achieve this using react-native-modal. But the problem is the back arrow button which is always supposed to be on the top of page becomes inaccessible entire time. I want to access the button even when modal is active.
Any help will be really appreciated cause it's not available anywhere, I went through the entire react native and react-native-modal docs related to this
I use variations of <CardActionArea onClick={someFunction}> throughout my React app, and I've come across an instance where clicking the card does not fire the onClick function. This is only when the component is rendered in a certain tree, in all other parts of the app it works as expected. I'm using in Algolia's react-instantsearch-dom component in my component that's giving the issue.
The ripple effect (the animation that shows the user clicked the card) fires in every situation. So it doesn't seem to be something as simple as a transparent div overlaying the card. Below is a working component tree compared to the one with the issue:
working
click does nothing
One odd thing you can see above is both CardActionArea components show an empty onClick. But the function still works in most cases.
I'm using onClick={() => console.log('click')} to test, so it doesn't appear to be an issue with the function itself. Any ideas on what could prevent the onClick even from firing, or suggestions for troubleshooting would be appreciated.
Edit: This issue doesn't happen in iOS Safari, but it does occur in Firefox.
Edit 2: Since I don't understand this well enough to reproduce it, and it doesn't appear to be something obvious in the code, I'm looking for troubleshooting advice. Is there something in Chrome's developer tools I can use to trace this behavior?
The issue was the anonymous component between Article and CommentEditor. The component was rendered into a Dialog conditionally, and removing the condition so that it always rendered when the Dialog was open fixed the issue.