Comments (4)
(I think) I fixed it by first trying root
, and if it's not found on there, then try root.alternate
:
export function useFiber(): Fiber<null> | undefined {
const root = React.useContext(FiberContext)
if (root === null) throw new Error('its-fine: useFiber must be called within a <FiberProvider />!')
// In development mode, React will expose the current component's Fiber as ReactCurrentOwner.
// In production, we don't have this luxury and must traverse from FiberProvider via useId
const id = React.useId()
const fiber = React.useMemo(
() => {
const rootFiberOptions = [root, root.alternate]
for (const possibleRootFiber of rootFiberOptions) {
if (!possibleRootFiber) continue
const fiber = traverseFiber<null>(possibleRootFiber, false, (node) => {
let state = node.memoizedState
while (state) {
if (state.memoizedState === id) return true
state = state.next
}
})
if (fiber) return fiber
}
},
[root, id],
)
return fiber
}
According to this comment in the react source code:
The current, flushed, state of this fiber is the alternate.
So I assume the memoizedState
, which contains the id, has not yet been added to the "new" fiber, only to the alternate fiber.
from its-fine.
Maybe root.alternate || root
would also work, but I'm not familiar enough with the React internals.
@CodyJasonBennett I'm not sure if you're familiar with React internals, any thoughts on this issue? Should I make a PR, or would you need a reproduction first?
from its-fine.
That is correct, React uses a double-buffered linked list data structure for Fiber, where alternate
is the WIP Fiber node. It does point to either the new or old Fiber though, we'd need a way to discern which the root node is.
from its-fine.
Another question is whether the FiberProvider's fiber is run at the same time as the component we're calling useFiber
in. Might it be that due to scheduling, the FiberProvider is flushed, but the component isn't yet? And that in that case, some parent fibers already switched to their alternates but children haven't yet?
Just speculating, the React source and all the concurrent features are still a bit of a blur to me.
from its-fine.
Related Issues (8)
- Component import problem HOT 11
- Error following React Native setup guide HOT 3
- Multiple Contexts HOT 2
- Problem with using react three fiber in grafana HOT 4
- 'useId' (imported as 'React') was not found in 'react HOT 2
- Export 'useId' (imported as 'React') was not found in 'react' HOT 1
- ContextBridge not updating without calling root.render() HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from its-fine.