I am using react hooks, but I find I couldn't expand/view/edit the hooks state value in chrome react dev tools.
Is this a known limitation of react devtools?
last time I checked this was a work in progress and is on the roadmap, you just have to wait for its release or you can subscribe to pre-releases:
https://react-devtools-experimental-chrome.now.sh/
Related
I use React with Snowpack and the react-refresh plugin.
After a change, the snowpack dev server recompiles correctly and the browser receives an HMR update signal - but the content is not reloaded, the changes are only visible after manual reloading of the page.
I have tested with Firefox, Chrome and Brave.
According to the documentation you don't have to configure anything else than to include the plugin.
Does anyone have an idea?
Would be very grateful!
Is your state management mobx?
If mobx is used, the component is optimized for memory by the observer, so the mobx state management must be updated to render.
In other words, the observer() has to React.memo applied, and it is rendered again only when a state change occurs.
So if you use useObserver(() => {}) it will work
I'm using React 16.8.x and the latest version of the React DevTools. In some cases, I'm able to inspect and modify hooks like useState no problem. But in other cases, the hooks appear to be read only - I can't modify them from the dev tools. Clicking on them, there is no way to make any changes to their values.
Is there any rhyme or reason for why I can edit hooks from the dev tools sometimes but not others?
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
how I can manipulate state in functional component without using hook state? because it 's supported after 16.x version. I can't update current react version (it's very old and stability project). The problem is in the libraries used in the project, which use React.PropTypes instead just PropTypes :( thanks for your answers
I have noticed when I move around the map, sometimes the map goes back a little (note! it does not go back to the previous this.props.region where the markers loaded).
I think, this is because this.props.region changes, therefore react rerenders the component since its state has changed onRegionChangeComplete. And, this only happens on iOS!
I am using
Expo: 23.0.0
react-native-maps: 0.17.1
React Native 0.50
React 16.0.0