From 458e4bb8b9367a082f80d9ce15a45d58b06c7333 Mon Sep 17 00:00:00 2001 From: "main()" Date: Wed, 23 Feb 2022 19:48:19 +0100 Subject: [PATCH] Fix react native component stacks --- src/view.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/view.js b/src/view.js index 9739ef1..a6c902f 100644 --- a/src/view.js +++ b/src/view.js @@ -29,11 +29,15 @@ export function view(Comp) { Comp.prototype && Comp.prototype.isReactComponent ); + const compName = Comp.displayName || Comp.name; + let ReactiveComp; + // below, define both function and class component using the pattern { [name] ... }[name] + // in order to correctly set the function/class name in firefox backtraces if (isStatelessComp && hasHooks) { // use a hook based reactive wrapper when we can - ReactiveComp = props => { + ReactiveComp = { [compName](props) { // use a dummy setState to update the component const [, setState] = useState(); // create a memoized reactive wrapper of the original component (render) @@ -63,12 +67,12 @@ export function view(Comp) { } finally { isInsideFunctionComponent = false; } - }; + } }[compName]; } else { const BaseComp = isStatelessComp ? Component : Comp; // a HOC which overwrites render, shouldComponentUpdate and componentWillUnmount // it decides when to run the new reactive methods and when to proxy to the original methods - class ReactiveClassComp extends BaseComp { + const ReactiveClassComp = { [compName]: class extends BaseComp { constructor(props, context) { super(props, context); @@ -140,12 +144,12 @@ export function view(Comp) { // clean up memory used by Easy State unobserve(this.render); } - } + } }[compName]; ReactiveComp = ReactiveClassComp; } - ReactiveComp.displayName = Comp.displayName || Comp.name; + ReactiveComp.displayName = compName; // static props are inherited by class components, // but have to be copied for function components if (isStatelessComp) {