[Fiber] Fix some of the warnings #8570

gaearon · 2016-12-14T00:05:55Z

Since we don't know if fibers will be committed or not we don't want to use the component tree. Instead we use the return pointers to form the stack since we have them in Fiber.

I'm keeping debugID because we'll likely want it for other warnings / perf / DevTools but this part doesn't rely on it. Instead I added _debugSource and _debugOwner that get copied from the element.

When an element changes, we should copy the source and owner again. Otherwise they can get stale since we're not reading them from the element.

Fixes an accidental omission when both source and owner are null but displayName exists.

When we're in Fiber mode we don't actually expect that warning being printed.

sophiebits · 2016-12-14T04:00:29Z

src/isomorphic/hooks/ReactComponentTreeHook.js

+  var owner = fiber._debugOwner;
+  var source = fiber._debugSource;
+  if (owner == null && source == null) {
+    return '';


Even if we don't have owner and source, we still want the name of this fiber, right?

Yes, a later commit fixes this.

sophiebits · 2016-12-14T04:01:32Z

src/renderers/shared/fiber/ReactFiber.js

  }
-  return fiber;
+
+  return (fiber : any); // Don't set dev-only fields in production


If you annotate the variable declaration as Fiber, can you remove this cast?

I actually didn't need it anymore because I annotated fields themselves as optional. Fixed.

sophiebits · 2016-12-14T04:06:05Z

src/isomorphic/hooks/ReactComponentTreeHook.js

+    var node = fiber;
+    do {
+      info += describeFiber(node);
+      node = node.return;


It seems like this .return can be wrong (can be the parent's alternate rather than the parent). The type will never differ and the owner rarely will, but the source could. You can imagine something like this:

if (!isFancy) { return <div>{props.children}</div>; } return <div className={...} ref={...} style={...}>{props.children}</div>;

In that case, it would be best if we could show the correct source. Perhaps you could use ReactFiberTreeReflection to find the correct one. If you're not going to tackle this now, can you at least add a TODO?

It is possible for a single Fiber to have been rendered by two different parents. E.g. in your example the props.children may have bailed out when the parent switched. So at any given point it can be both.

I think it may just depend on context. In some context you may want the "current" Fiber path but in the case of the key warning you probably want the path you took to get to the update which will have the correct .return pointers in that case.

If it is meant to only be used during reconciliation and not at random times or commit phase, then we should name it to reflect that. We could even enforce it by making it getStackAddendumByCurrentFiber() reading the currently executing Fiber.

But I'm not sure what you're plan is for things outside of reconciliation since these example are all during reconciliation as far as I can tell.

My tentative plan is to figure out a way to get the tree hook working but I want to get the most important warnings (propTypes and keys) working by simpler means first. It gives me a better understanding of the problem to solve these separately (and maybe unify later) than try to unify right away.

Okay, I'm just using ReactCurrentOwner for this now. Seems to work well so far.

sophiebits · 2016-12-14T04:11:40Z

src/renderers/shared/shared/__tests__/refs-test.js

-      'renderer. It is likely to have bugs, breaking changes and is ' +
-      'unsupported.'
-    );
+    if (!ReactDOMFeatureFlags.useFiber) {


Thanks, I knew this failed in Fiber but didn't think of doing this.

sophiebits · 2016-12-14T04:15:30Z

src/renderers/shared/fiber/ReactChildFiber.js

+          if (
+            knownKeysInDev != null &&
+            newChild != null &&
+            typeof newChild.key === 'string'


This should also have the $$typeof check. The logic here feels pretty brittle.

Yea, is there anyway you can just avoid adding it by doing the check below this condition instead?

sebmarkbage · 2016-12-14T08:32:43Z

src/renderers/shared/fiber/ReactChildFiber.js

@@ -564,6 +613,8 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {
    let resultingFirstChild : ?Fiber = null;
    let previousNewFiber : ?Fiber = null;

+    let knownKeysInDev = null;


This whole validation is going to be pretty expensive with all these extra temporary allocations anyway. I would suggest that we just do two loops over the array or iterable so that the whole logic can be isolated to a separate function and not bloat the already complex diffing which is about to be even more complex with further optimizations.

It might even be faster due to better memory locality.

Thank you for explaining. I fixed this in 5724657.

sebmarkbage

I don't think we should use ReactCurrentOwner for this. We can use a different module/field that does the same thing in DEV only but not the production one. Because this has runtime semantic meaning and we want to be able to control where it is used.

ReactCurrentOwner is also effectively deprecated in React so it's confusing that we add more uses of it when we want to minimize them.

gaearon · 2016-12-14T19:20:42Z

src/shared/types/checkReactTypeSpec.js

@@ -53,7 +38,7 @@ function checkReactTypeSpec(
  location: ReactPropTypeLocations,
  componentName,
  element,
-  debugID,
+  stack,


Oops, this is not a good change. It would be expensive to always calculate it.

sophiebits · 2016-12-14T19:17:59Z

src/renderers/shared/fiber/getCurrentOwnerName.js

+    return getComponentName(owner);
+  }
+  // In Fiber, current owner could be any fiber.
+  let fiber = ((owner : any) : Fiber);


Owner could also be a Stack instance. #8458

Hmm, didn't earlier test exclude Stack owner? if (typeof owner.tag !== 'number') {

Oh you're right, I missed it.

sophiebits · 2016-12-14T19:19:16Z

src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js

+          container
+        );
+      }).toThrowError(
+        'This DOM node was rendered by `Owner`.'


In the future we should change this warning to include the stack.

Yep. Aiming for parity for now but we should really revisit them all.

We keep known keys in a set in development. There is an annoying special case where we know we'll check it again because we break out of the loop early. One test in the tree hook regresses to the failing state because it checks that the tree hook works without a Set available, but we started using Set in this code. It is not essential and we can clean this up later when we decide how to deal with polyfills.

It needs to be available both to Fiber and Isomorphic because the tree hook lives in Isomorphic but pretty-prints Fiber stack.

The goal is to use ReactCurrentOwner less and rely on ReactDebugCurrentFiber for warning owner name and stack.

Fiber used a helper so two tests had the same phrasing. Stack also used a helper for most invariants but hardcoded a different phrase in one place. I changed that invariant message to use a helper which made it consistent with what it prints in Fiber.

gaearon · 2016-12-14T22:29:37Z

Rebased incorporating the feedback. Stopped using ReactCurrentOwner.

gaearon · 2016-12-15T00:04:02Z

@sebmarkbage

This is ready for review. See 6796336 as the commit in the middle that changed since last review. The rest is the same until two new commits (05bf2e3 and caed41b).

The remaining warnings are mostly SSR and tree hook (only used in Perf as I used return pointer and mutable global for other use cases). There's DOM nesting validation and a few composite warnings missing which I'll try to add tomorrow but I'd like to do it after landing this.

sebmarkbage · 2016-12-15T03:46:49Z

src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js

@@ -1436,7 +1436,7 @@ describe('ReactDOMComponent', () => {

    it('should warn about class', () => {
      spyOn(console, 'error');
-      ReactDOMServer.renderToString(React.createElement('div', {class: 'muffins'}));
+      ReactTestUtils.renderIntoDocument(React.createElement('div', {class: 'muffins'}));


I suppose we should ideally have all our warnings replicated on the server and therefore have test for each one in a server-environment. Unless it's for updates etc.

sebmarkbage · 2016-12-15T03:48:56Z

src/renderers/dom/fiber/ReactDOMFiber.js

@@ -101,6 +102,9 @@ var DOMRenderer = ReactFiberReconciler({
    props : Props,
    rootContainerInstance : Container,
  ) : void {
+    if (__DEV__) {
+      validateProperties(domElement, type, null, props);


Why don't we just set ReactDebugCurrentFiber during the commit phase too so that it's easy for any renderer to get to this debug information during whatever validation they want?

sebmarkbage · 2016-12-15T03:53:38Z

This looks fine to me except 0aeda52

It would be nicer to always have the current debug Fiber available to renderers so that they can do the validation whenever is most convenient rather than having to split it up and do multiple passes.

This gets mount-time CSS warnings to be printed. However update-time warnings are currently ignored because current fiber is not yet available during the commit phase. We also regress on HostOperation hook tests but this doesn't matter because it's only used by ReactPerf and it doesn't work with Fiber yet anyway. We'll have to think more about it later.

This makes it available during updates, fixing the last failing test in CSSPropertyOperations.

It is not clear if the old hook system is worth it in its generic incarnation. For now I am just hooking it up to the DOMFiber renderer directly.

This helps us track which warnings are really failing in Fiber, and which ones depend on SSR.

gaearon · 2016-12-15T16:29:04Z

I think everything is addressed now. Waiting for build to pass and then merging.

facebook-github-bot added the GH Review: review-needed label Dec 14, 2016

gaearon requested a review from sebmarkbage December 14, 2016 00:06

facebook-github-bot added the CLA Signed label Dec 14, 2016

gaearon mentioned this pull request Dec 14, 2016

[Fiber][WIP] Include component stack in Fiber #8562

Closed

gaearon requested a review from sophiebits December 14, 2016 01:20

gaearon changed the title ~~[Fiber] Implement component stack for some warnings~~ [Fiber] Fix some of the warnings Dec 14, 2016

gaearon added 6 commits December 14, 2016 04:05

Implement component stack for some warnings in Fiber

7bc8f36

Keep Fiber debug source up to date

c456f7d

When an element changes, we should copy the source and owner again. Otherwise they can get stale since we're not reading them from the element.

Remove outdated TODOs from tests

18808a1

Explicitly specify Fiber types to include in the stack

d501676

Fixes an accidental omission when both source and owner are null but displayName exists.

Fix mised Stack+Fiber test to not expect extra warnings

ddae7db

When we're in Fiber mode we don't actually expect that warning being printed.

Warn on passing different props to super()

aa92f74

gaearon force-pushed the fiber-warning-2 branch from e8960e3 to fbde80c Compare December 14, 2016 04:06

sophiebits approved these changes Dec 14, 2016

View reviewed changes

sebmarkbage reviewed Dec 14, 2016

View reviewed changes

gaearon force-pushed the fiber-warning-2 branch 6 times, most recently from 2105300 to 1577957 Compare December 14, 2016 18:57

sebmarkbage reviewed Dec 14, 2016

View reviewed changes

gaearon commented Dec 14, 2016

View reviewed changes

sophiebits reviewed Dec 14, 2016

View reviewed changes

gaearon added 4 commits December 14, 2016 19:47

Move ReactTypeOfWork to src/shared

8f544a7

It needs to be available both to Fiber and Isomorphic because the tree hook lives in Isomorphic but pretty-prints Fiber stack.

Add dev-only ReactDebugCurrentFiber for warnings

6796336

The goal is to use ReactCurrentOwner less and rely on ReactDebugCurrentFiber for warning owner name and stack.

gaearon force-pushed the fiber-warning-2 branch from 1577957 to 0aeda52 Compare December 14, 2016 22:28

gaearon force-pushed the fiber-warning-2 branch 2 times, most recently from 1b72eb2 to caed41b Compare December 14, 2016 23:58

sebmarkbage reviewed Dec 15, 2016

View reviewed changes

gaearon added 4 commits December 15, 2016 15:42

Set ReactDebugCurrentFiber during the commit phase

080330a

This makes it available during updates, fixing the last failing test in CSSPropertyOperations.

Add DOM warnings by calling hooks directly

bc6bd20

It is not clear if the old hook system is worth it in its generic incarnation. For now I am just hooking it up to the DOMFiber renderer directly.

Add client-side counterparts for some warning tests

837e683

This helps us track which warnings are really failing in Fiber, and which ones depend on SSR.

gaearon force-pushed the fiber-warning-2 branch from caed41b to 837e683 Compare December 15, 2016 16:27

gaearon merged commit e36b38c into facebook:master Dec 15, 2016

gaearon deleted the fiber-warning-2 branch December 15, 2016 16:46

bvaughn mentioned this pull request Jan 3, 2018

Update additional tests to use .toWarnDev() matcher #11957

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Fiber] Fix some of the warnings #8570

[Fiber] Fix some of the warnings #8570

gaearon commented Dec 14, 2016

sophiebits Dec 14, 2016

gaearon Dec 14, 2016

sophiebits Dec 14, 2016

gaearon Dec 14, 2016

sophiebits Dec 14, 2016

sebmarkbage Dec 14, 2016 •

edited

Loading

sebmarkbage Dec 14, 2016

gaearon Dec 14, 2016

gaearon Dec 14, 2016

sophiebits Dec 14, 2016

sophiebits Dec 14, 2016

sebmarkbage Dec 14, 2016

sebmarkbage Dec 14, 2016

gaearon Dec 14, 2016 •

edited

Loading

sebmarkbage left a comment

gaearon Dec 14, 2016

sophiebits Dec 14, 2016

gaearon Dec 14, 2016

sophiebits Dec 14, 2016

sophiebits Dec 14, 2016

gaearon Dec 14, 2016

gaearon commented Dec 14, 2016

gaearon commented Dec 15, 2016

sebmarkbage Dec 15, 2016

sebmarkbage Dec 15, 2016

sebmarkbage commented Dec 15, 2016

gaearon commented Dec 15, 2016

[Fiber] Fix some of the warnings #8570

[Fiber] Fix some of the warnings #8570

Conversation

gaearon commented Dec 14, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sebmarkbage Dec 14, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gaearon Dec 14, 2016 • edited Loading

Choose a reason for hiding this comment

sebmarkbage left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gaearon commented Dec 14, 2016

gaearon commented Dec 15, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sebmarkbage commented Dec 15, 2016

gaearon commented Dec 15, 2016

sebmarkbage Dec 14, 2016 •

edited

Loading

gaearon Dec 14, 2016 •

edited

Loading