There are two lines when using console.log() from my "react-app", how can I stop the second line from showing up?
There could be a few reasons why. First and most likely is that your main app is wrapped in <React.StrictMode>.
If that's not true, then state may be updating, causing re-renders. Or if the console.log is in a useEffect, dependencies changing could cause this.
These blog posts have some good info on what may be happening and why:
My React components render twice and drive me crazy
React Components rendered twice — any way to fix this?
Related
So I'm using Next.js with jotai a few months now. The problem is that with every change (and when the fast-refresh occurs due to the change), the atoms are reset and I have to refresh the page manually.
Do you know if there is any configuration that I need to make in order for it to not reset the atoms when the fast refresh occurs?
Here is a codesandbox link, but there is no fast refresh there (I am using the same code)
https://codesandbox.io/s/nextjs-with-jotai-forked-eori6o?file=/pages/_app.js
Thank you!
I have a react component in a project that I'm working on, and this component is on 2 different pages, and I gave it different css proprieties for each of these 2 pages.
Now, the behaviour that I expect is : when I switch the pages, the component will load the css that I gave for it for that specific page.
What actually happens is that if I switch between the pages, the component keeps some classes from the previous page, and messes up my component. If I manualy refresh the page, it loads only the css I expect, but If I just use my app buttons to switch between pages, without refresh, it does the unexpected behaviour.
Does anyone know why this happens ? Or how can I manage it ? I tried many css solutions, but none worked...
I am a frontend developer and I am working on a web app project using react-admin.
The code is fine, no errors. I launch the app. At first it looks the way it is supposed to look. A few components with tables, menu bar, etc. However, after a few clicks the view goes bunkers. Elements that should be at the top go to the bottom, elements disappear, there are boxes with shadows around elements. The view gets squished, a total disaster!
Can anyone give me any suggestions about what might have caused it and how to fix this issue?
Remove material-ui from your dependencies. You have to use just the material-ui version that comes from react-admin(1.4.0) because the CSS classes from the latest versions of material-ui(>2.0.0) clash with the internal react-admin components.
My little app was working, then I tried to change the navigation a little and now it crashes at
await Navigation.PopAsync();
I wonder if there is a way to be able to see the navigation stack, to know what would be expected when i do the Pop. I use PushAsync to get to this page, but since it crash here, I maybe screwed up somewhere else...
You have access to the Navigation Stack by calling Navigation.NavigationStack. If you want to know what is in there you could find the Type of each object within it.
I have a Flex 3.5 Air Application; The main window has, besides the header, a TabNavigator. In a Tab, I've put a Google Maps object. It works fine, except that it "loads" very slow and the whole application freezes ( not responding problem ).
Now I would like to fix that but don't really now how to implement one of these solutions:
1) Load the API before the whole application loads.
2) Load the API somehow async, when the tab is clicked. I don't really need a fancy preloader, it's enough that my app doesn't freeze.
Please note that I'm "110%" sure that it's the GoogleMaps's fault since the tab canvas is empty, and no other code is there [double checked that]. Also please note that the map only loads, then I call the setCenter method, so no other operations that could freeze it.
EDIT: I managed to determine that not the Api Object creation is slow, but the actual display of it on the GUI. Here's the line of code. ResellersMapClass only extends the Google Maps API class since I intend to add there extra functionality. But right now is clean.
this.map = new ResellersMapClass();
//between here
this.mapContainer.addChild( this.map );
//and here
Now is there a way to preload this ? Or any other solution that will prevent the GUI from freezing.
Thanks,
Gabriel
I had the same problem with the Yahoo! map API. I ended up just dropping it in a module and gave it a ProgressBar for the load. That should help with the async issues at least. If the problem is a heavy algorithm in the library, there is no way around that until flash rolls out true multi-threading (crosses fingers).