Debug React Component Performance with ES7 Annotations
neos.io
neos.io
This is a really bad idea. There is no decorator transform that matches the current draft specification. There's only the legacy transform that matches an old, outdated version of the decorator spec.
In general it's not a good idea to do this sort of thing – you're pretending to use an ES7 feature, but actually you're not. You're using what's effectively a bespoke version of the language with no necessary resemblance to what's going to become the spec.
You're absolutely right; I maybe would not use this part for production. However, create-react-app also implements these decorators; and they are a quite elegant way of annotating methods or classes.
All the best, Sebastian
> Many popular libraries use decorators in their documentation. Create React App doesn’t support decorator syntax at the moment because:
> It is an experimental proposal and is subject to change.
> The current specification version is not officially supported by Babel.
> If the specification changes, we won’t be able to write a codemod because we don’t use them internally at Facebook.
CRA _does_ support the not-yet-final object spread syntax, which is currently Stage 3, and the class properties syntax, which is Stage 2. However, both of those are pretty straightforward syntax sugar for existing capabilities, and the React team has promised to provide codemods if they ever do happen to be changed or canceled.That said, the perf checking does look useful. I'll add this tool to my list of React/Redux-related devtools, at https://github.com/markerikson/redux-ecosystem-links/blob/ma... .
Thanks, you are right!
Do you have a good suggestion on a syntax how people could use the "debugger" in a nice way? I kinda dislike first creating a component and then wrapping it completely afterwards, although that of course would work.
All the best, Sebastian
class MyComponent extends React.Component { /* ... */ }
debugReasonForRendering(MyComponent);
Where `debugReasonForRendering` patches `arguments[0].prototype. shouldComponentUpdate`.