-
Notifications
You must be signed in to change notification settings - Fork 46.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[React 19] prop-types removal alternative / console component trace #28992
Comments
React is missing a public API for logging component stack trace. const getStackTrace = () => {
let stack = '';
const ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
if (ReactSharedInternals != null) {
const ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
const stackAddendum = ReactDebugCurrentFrame.getStackAddendum();
if (stackAddendum !== '') {
stack = stackAddendum;
}
}
return stack;
} The problems with this solution:
Does the React team consider adding public API for this? Alternatively, we can create a community package that would encapsulate the internal API access and provide a cross-version method for getting the stack trace. |
There are two separate issues here: PropTypes deprecation, and component stacks for console.error. The PropTypes concerns are understandable, but we're not adding support back to them. The blog posts are separate because one announces the features in 19, and the other the breaking/notable changes:
The component stack changes seem concerning, they seem to work for me in the CodeSandbox you linked: |
@rickhanlonii It doesn't work when opening the codesandbox link standalone. It doesn't work on Vite either. I haven't tested Next.js but I don't recall seeing it work their either. |
Doesn't work in Next.js neither for me. I suppose normally the react devtools extension should kick in? |
Correct! I mentioned the component stacks in this issue because we need them for props validation errors that would replace propTypes for us. |
I just stumbled on this issue while catching up on React 19 changes - specifically around the removal of propTypes checking, I'm concerned the documentation could have been clearer. What's caught me off guard is that "Importing prop type checkers with As far as I can see there was no public discussion or proposal for the removal of actual prop type checking - and while I guess technically it's not a breaking change so it's not strictly necessary to put in deprecation warnings as with e.g. |
Data from https://2023.stateofjs.com/en-US/usage/ You can conclude that:
We might be looking at 30% of the user base with no more types. It will be interesting to see what 2024 looks like. If this grows from 70% to 90%, it should be all fine. Then, it's really only about the problems listed above with not having propTypes when writing TypeScript (no React track with console.error/warn, no coverage for more specific types, no primitives for warning deduplication in render components), |
Could anyone help me understand how to override class components for adding the type-value checks. That is, there is no So we can't simply: import checkPropTypes from 'prop-types/checkPropTypes'
const oldRender = React.Component.prototype.render
React.Component.prototype.render = function () {
checkPropTypes(this.propTypes, props, 'prop', this.name)
oldRender()
} Or any other approach. Thanks As @oliviertassinari mentioned, I also check the values (not only the data type). |
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment! |
Bump |
Summary
The state of
.propTypes
is a bit unclear. I see:But it looks inaccurate, I would expect it says that
React.PropTypes
were deprecated from the source linked.Source
https://github.com/mui/material-ui/blob/2827bacf567fc95ef147d543316ffe688896db90/packages/mui-material/src/Autocomplete/Autocomplete.js#L985-L990
So to replace this, it seems that the closest alternative is to do something like this:
Unfortunately, it's missing the component trace.
Before: https://codesandbox.io/p/sandbox/mystifying-mcclintock-mf7r5m?file=%2Fsrc%2FDemo.js%3A16%2C1
After: https://codesandbox.io/p/sandbox/agitated-orla-8kj8rh?file=%2Fsrc%2Findex.js
It seems much harder to figure out where console logs come from. So while https://react.dev/blog/2024/04/25/react-19#diffs-for-hydration-errors is a great step forward, this one feels like a step backward. Is there an alternative to it?
There is a function in https://github.com/facebook/prop-types/blob/1c9c6311c1fb8778bffc7a1ca70c273ee8a8654d/checkPropTypes.js#L20 but it doesn't log the component trace either. This function was recommended in #28328.
The text was updated successfully, but these errors were encountered: