Reactjs.org: Documentation regarding the React Fiber object internals

[ezmiller]

Recently, I needed to delve into the internals of the new React fibers. Specifically, I needed to try to access the instance of a React component by way of a DOM element. With the pre-fiber React, I'd done this with a function that looked like this:

const getReactComponent = dom => {
  let found = false;
  const keys = Object.keys(dom);

  keys.forEach(key => {
    if (key.startsWith('__reactInternalInstance$')) {
      const compInternals = dom[key]._currentElement;
      const compWrapper = compInternals._owner;
      const comp = compWrapper._instance;
      found = comp;
    }
  });

  return found || null;
};

With the new fiber implementation this no longer worked for reasons that became clear when I read through @acdlite's approachable intro to fibers. @acdlite explains there that a fiber is a "unit of work" and as well as an entity with a one-to-one relation to an instance.

This helped me understand why my previous approach wouldn't work. A fiber is a placeholder for work to be done on an instance, it seems, and while it has a relationship to an instance, it's relation to the instance is evidently more complex. What I could not figure out from @acdlite's document, however, was how I could reach the instance, or if that is still possible at all.

Admittedly, this is an unusual use case, but I wonder if the React docs would benefit from some more detail regarding the nature and relationship of the specific properties on a fiber, and what kinds of manipulations are possible (e.g. accessing an instance) as illustrations of the nature of a fiber and how it differs from the old, more high-level implementation.

Do others think that such a document would be a good idea? If so, I'd be willing to take a crack at it, or work on it with other people. But I'd need help to understand fibers better. Perhaps a good place to start would be answer my question here: how do we (or can we) access an instance given a dom element containing a render component?

(I apologize in advance if my question is imprecise or my terminology is off. Please suggest corrections or clarifications if necessary.)

[bvaughn]

I wonder if the React docs would benefit from some more detail regarding the nature and relationship of the specific properties on a fiber, and what kinds of manipulations are possible (e.g. accessing an instance)

External code should not access React internals. Internal implementation details _will_ change over time. This has caused a lot of pain for projects like Enzyme in the past- actually requiring a complete rewrite when React 16 was released.

If you find your application needing to be able to do things that aren't supported with the public API, I encourage you to open an issue at facebook/react and propose a new public API method. The fiber model has a lot of nuance and it would be very easy to break things if external code were to interact with internal state. The public API is owned by the React team though and is tested thoroughly. Adding functionality to the public API is the only way to ensure that it's maintained over time.

No harm in asking this question 😄 but I hope you'll understand why I'm going to close this issue without any action on the docs side.

[alexkrolick]

Also, you can add a ref to a React Element node that gives you access to the component instance. If you need to hand the instance off to another piece of code you could use a global variable or fire an event.

https://reactjs.org/docs/glossary.html#refs

[bvaughn]

Thanks @alexkrolick!

Very sorry if I misunderstood the initial question and it was really just asking about refs 😄 I thought it was asking for more of a back-door to access component instances.

[ezmiller]

@alexkrolick: that's an interesting thought. I'll give that a shot.
@bvaughn: you read the question correctly. It was more about providing some guide to the react internals, which I was curious to understand better. I see your point though. Thanks for the response.

[gaearon]

I do think we'll eventually write some docs for contributors that explain internals better. But I don't recommend depending on those 🙂

[abhikmitra]

It would be really nice to have documentation on Fibers and what each property means. Its one thing to say that don't depend on these and completely different thing to say , "There shouldn't be documentation or need for understanding" since people should not use it. I am guessing there would be some internal documentation inside Facebook for folks contributing to React. Wouldn't harm if you put it out.

[bvaughn]

I am guessing there would be some internal documentation inside Facebook for folks contributing to React.

There isn't.

Pretty much all of the documentation we have on internals like fibers are inline comments in the source.

If you look at the code, it's actually pretty well commented.

[gaearon]

We're also happy to answer specific questions, just file an issue and we'll answer