The react developer tool used to show why a component was rendered, e.g. due to state change, context update or because of a rerender of the parent.
This information can not be found in the flamegraph anymore.
Did they remove it or are there some prerequisites in order for this information to be included?
I found the solution by pure chance today. There is a checkbox hidden in the settings on the profiler page which can be toggled to enable this setting..
Related
Can you See State variables in Production or are they private in the class and not viewable from outside?
According to the answer of this question: Disable chrome react DevTools for production you are able to disable the use of the react dev tools on your production site, however this would not absolutely stop the user from reading the state as they could always find & disable that line of code, or find some other way of accessing the state.
React runs entirely inside the user's browser, and because of this it is not possible to completely prevent the user from accessing the source code, or things like the state.
To view state, you will need to install React's Devtool
Then open your developer tool then switch to the component tab:
Find and click to your component that has a state, then you will see your state also your props on the right side:
You can use react devtools to inspect state and props of a component.
Yes, you can check them via something like React dev tools.
This is a screenshot of the new React Dev Tools in Google Chrome:
Only the top level component name AdminArea shows. This component is in my script's entry file, index.jsx. There should also be AddNewCoupon and ViewCoupons components. No filters are enabled.
Notice also the state hook naming inside the component only says "State". These are booth useState() hooks.
The useReducer's initial state variable names can be seen, but only because I'm directly exporting and importing that variable into the entry file index.jsx.
Anyone know how to fix these labelling issues?
Actually there's no current solution to this problem I was going to open a Github issue about this but it turned out that Bryan Vaughn opened the issue himself :). Here is the reference to Github issue. Cheers, sigfried.
Update
Now it's possible to show the names within the DevTools, click the magic wand in the top right corner:
And that will become:
I am working on a React app, and within it there is a page with a lot of graphs and large list component, which takes some time to load (performance dependant). This is fine for now, but the issue comes from the following:
at the first render, there is an API call (App wide as different pages use the same data). A loading spinner shows while the API data is fetched
Once the data is fetched, it is Redux manages the state, and each component just takes what it needs from there (no more loading).
My issue is that when I navigate between pages trough links (react-router), after I click on the link it takes a while for the page to show and the menu to update the current page. None of the state data has changed in that timeframe, so I assumed a PureComponent would prevent re-render, but it doesn't work.
Is there any way to not re-render the page? I would expect to click on a link an immediately see the page that was already loaded before.
Sorry if the question is obvious, I got quite confused while researching this, with cold splitting, lazy loading, etc. which seems to be more about initial load vs. navigation?
If you have a large component dataset to mount and your state does not changes or affects re-renders you could prevent component from unmounting entirely.
If you are using react-router you can rely on setRouteLeaveHook.
If your unmount depends on conditional rendering, it is easier as you can hide your component in various way, including css display:none
There are several ways you can do this
The first one would be to not unmount the component, just hide it with CSS and display: none, but that's a shit solution if you ask me, since you'll still have the component in the DOM.
Another solution that you can use is the one that the guys from the Facebook team used when creating the official website for React. Once you hover over the link to the page, send a request to prefetch the data for that page. So, before the user even clicked, you will have the request already sent.
Another solution you can use is to cache the data. If you are not worried about users with older browsers waiting a bit for the component to load again. You can keep the data for the component in localStorage, then, when you are about to mount the component, check if the data is already in localStorage if it's there, just render the component, if not, just grab the data again.
A combination of the first and the second option would make your component pretty much always instantly render.
Scenario:
I have a React component which shows up in one of the tabs on my website. Navigating to another tab in the same website unmounts the component and navigating back to the original tab renders the component again.
Problem:
The problem I'm facing is that the older React component still shows up in the React developer tools console and everytime I navigate back to the original tab, the number of components shown there increase by one.
My question is: Are the components not getting deleted and that there is another way to delete the component which I'm not doing or it is the behavior of React developer tools console to show earlier components?
I'll suggest to check the actual DOM, not what you see in the devtools. It is possible that there is a bug in devtools. The way of how React's devtools work is a little bit tricky. The communication between what happens in the page and the actual devtools ui depends on couple of factors. There is a content script, background script a bridge that they wrote and so on. If you see the components number growing in the DOM then the problem is not in the devtools but in your app.
Is there any way to get logs of which all React components get rendered or rerendered when any event/action is performed. I just want to check whether any unwanted React component is getting rerendered. I know we could achieve this by adding consoles in render function, componentWillReceiveProps or componentWillUpdate. But I have number of components in my webapp. Adding console statements in each component would be a mess. Is there a better way?
A nice option is to visualise React components in the chrome timeline. This lets you see which components exactly get mounted, updated, and unmounted and how much time they take relative to each other. That feature was added as part of the release of React 15.4.0. You can take a look at the official blogpost to get a better insight, but summing up, those are the steps to get it up and running:
Load your app with ?react_perf in the query string (for example, http://localhost:3000/?react_perf).
Open the Chrome DevTools Timeline tab and press Record.
Perform the actions you want to profile. Don't record more than 20 seconds or Chrome might hang.
Stop recording.
React events will be grouped under the User Timing label.
After that, you will get a cool visual representation of mounting, updating and unmounting of your different components over time
In addition to rauliyohmc answer. Profiling tool he described is really helpful and powerful, but if your task is just checking if there are unnecessary re-renders (i.e. ones which did not lead to DOM changes) you can use nice and simple react-addons-perf tool. It has printWasted method which will provide you info about wasted re-renders.