I'm trying to set enableSelectAll to true for a Material-UI TableHeader. This component is stateless (or at least there is no state displayed in the React Chrome (50) Developer Tool). If I try to edit one of the props, pressing enter does nothing. Perhaps this is by design as I believe props aren't meant to be modified. But I'd like to enable/disable that property nonetheless. Is there a way to do this from within the developer tools?
If you just set property, it would be overwritten on the next tree update, so it's a bad idea.
I recommend moving such properties into the state and set it with this.setState().
Related
I'm working on an editor where a user adds, updates, and removes elements from a Canvas. I'm using FabricJS to actually do the drawing, but I don't think this matters.
Configuration is stored in POJOs in a redux store, and this is loaded into the canvas. As the user updates the canvas, either through the Fabric controls or through custom controls in React, these updates are emitted as events from Fabric and are propagated into my redux store.
The issue I'm having is finding a good way to handle state. The single biggest issue I'm dealing with is that each state update triggers a re-render which causes my entire editor canvas to flash as the canvas is torn down and re-rendered.
I have already implemented Adam's fantastic post on "persistent layouts" in NextJS. This actually solved another issue I had with flashes caused by page routing. However, I don't think I'm able to apply the same pattern to this.
I have tried the following:
memo - This doesn't work well for canvas as it still shows the flash, even if props don't change
useRef - Remove any reactive state that could cause a re-render from my component (and parents). However, I'm not sure how to then propagate state changes to and from the canvas.
In addition to the above, try using a global event bus for communication. This seems very annoying to work with and debug, so I want to ask before I implement this.
Has anybody solved a problem like this before? Specifically, how to get around re-rendering a Canvas while still enabling it to have some access to Redux state.
I'd be happy to provide a sample repo of the issue if this is unclear.
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..
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.
I use the react-devtools Chrome extension. When I set state using hooks (useState) to set an object in state, the actual setting of state seems to work fine. In devtools however, that state object shows that the Hooks > State has content ({...}), it also implies that the content is accessible . When I click on the “expand” (down arrow icon) nothing happens; I cannot view the object’s entries. Am I missing something or do devtools not work with hooks?
Tl:dr How do i use react-devtools to view Hooks state?
I see the same thing, though the issue is only with objects. Primitive values in state seem to show up fine.
It was logged as an issue 3 weeks ago: https://github.com/facebook/react-devtools/issues/1282
I'm surprised it hasn't already been addressed, but I suspect it will be addressed soon now that hooks are released.
I have also seen on Twitter that Brian Vaughn has been working on a rewrite of React devtools:
https://twitter.com/brian_d_vaughn/status/1093962235116810240
https://github.com/bvaughn/react-devtools-experimental
but it sounds like it will be a little while yet before that is ready for broad use.
Update with React v16.8
React Hooks are now supported by React DevTools.
Source: https://reactjs.org/blog/2019/02/06/react-v16.8.0.html
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.