[Fiber] Umbrella for remaining features / bugs

[sebmarkbage]

This is an umbrella issues for remaining fiber issues. More can be found by running the unit tests with the useFiber flag in ReactDOMFeatureFlags turned on

See #8830 for additional tasks beyond the scope of the initial Fiber release

Phases 1–6

Phase 1: Infrastructure

• Set up infra to know which tests are failing @spicyj
• ReactTestUtils features
  • reactComponentExpect @gaearon [Fiber] Fix reactComponentExpect #8258
  • scry etc. @gaearon [Fiber] Fix TestUtils edge cases #8257

Phase 2: Smaller / Initial Tasks

• ReactDOMFiber.render - Simple synchronous case. [@sebmarkbage] Quick fix to the return top level problem #8029
• String refs using owner. [@acdlite] [Fiber] String refs and owner tracking #8099
• Pass the correct previous state to componentDidUpdate. [Fiber] State Updates #7941
• componentWillMount, componentWillReceiveProps, componentWillUpdate life-cycles. [@sebmarkbage] [Fiber] Add more life-cycles #8015
• componentDidUpdate should not fired if shouldComponentUpdate returns false. [@sebmarkbage] [Fiber] Don't call componentDidUpdate if shouldComponentUpdate returns false #8028
• Instance should be recreated when already started work gets resumed (no componentWillReceiveProps without didMount). [@sebmarkbage] [Fiber] Add more life-cycles #8015
• Fix module pattern in mountIndeterminateComponent. [@sebmarkbage] [Fiber] Add more life-cycles #8015
• findDOMNode. [Fiber] Implement findDOMNode and isMounted #8083 [@sebmarkbage]
• Switching between types doesn't track deletions (updateSlot doesn't return null). [@sebmarkbage / @gaearon] [Fiber] Delete child when the key lines up but the type doesn't #8085
• PureComponent flag. [@acdlite] [Fiber] PureComponent #8118
• Ensure that scheduling works synchronously by default but batched in DOM events. (Initial default priority.) [@acdlite] [Fiber] Use synchronous scheduling by default #8127
• unstable_batchedUpdates [@acdlite] [Fiber] Use synchronous scheduling by default #8127
• setState in componentDidMount/componentDidUpdate should always be synchronous at the end of the batch. Even if work is deferred. [@acdlite] [Fiber] Updates from inside componentDidMount/Update should have Task priority #8206
• Make sure setState + error boundaries work in it [@gaearon / @acdlite] [Fiber] "Task" priority for error boundaries and batched updates #8193
• Unmount failed trees before attempting to recover [@acdlite] [Fiber] New error boundary semantics #8304

Phase 3: Larger Tasks

• Allow testing Fiber in Facebook web codebase [@spicyj]
• Error boundaries. [@gaearon]
• Context [@gaearon [Fiber] Initial implementation of context #8272]
• DOM attributes/properties update. [@sebmarkbage]
• DOM events - Plug in the event system. [@sebmarkbage]
• renderContainerIntoSubtree - Preserve state and such. [@spicyj Fiber: renderSubtreeIntoContainer #8368]
• [fb] Bug: Switching from text children to regular children won't clear the old text content. (Not an easy fix since the side-effect of the parent is scheduled after the child insertions.) [@acdlite / @sebmarkbage] [Fiber] Clear existing text content before inserting children #8331
• Recover from errors during commit phase, including errors thrown from host environment. Should only use a single try-catch block. [@acdlite]
• [fb] SVG mode switch (based on if a parent is SVG or HTML). [@gaearon [Fiber] Support SVG by adding a container stack #8417]
• [fb] setState behavior when called in all possible life-cycles including sibling life-cycles and parents and children. [@acdlite]

Phase 4: Uncovered Bugs

• Root container is wrong in commit phase (HostRoot no longer pops context provider during complete phase #8568 (comment)) [@sebmarkbage] [Fiber] Compute the Host Diff During Reconciliation #8607
• Update state/props object pointers even if bailout happens. This will currently cause an unnecessary componentDidUpdate. Solve that somehow. [@acdlite] [Fiber] Move memoization to begin phase #8655
• Validate if inputValueTracking does indeed need to be cleaned up on unmount I don't think it needs to but we should revert anyway
• autoFocus doesn't work. Todo in ReactDOMFiberComponent. [@bvaughn] Renderers can queue commit effects for initial mount #8646
• [fb] When the last effect renders, there's an infinite loop. [@acdlite]
• [fb] Defer clearing of initial nodes until work is actually begun. (Ensure that unmounting and rerendering in the same batch works.) [@acdlite]
• Updates on different roots in componentWillMount (ReactUpdates-test) [@acdlite]
• Refs should update even if shouldComponentUpdate returned false. However, componentDidUpdate should not fire. [@acdlite] [Fiber] Update refs even if shouldComponentUpdate returns false #8685
• [fb] Make top level render and unmount synchronous by default even when they're in a batch. (Even for updates? No, not for updates.) [@acdlite] [Fiber] Sync mount and unmount #8634
• [fb] Uncaught TypeError: Cannot read property 'children' of null

  react/src/renderers/shared/fiber/ReactFiberBeginWork.js

  Line 213 in 705c9bc

  let nextChildren = workInProgress.pendingProps.children;

  (probably due to context change, based on the caller) We should probably either avoid rerendering or set pendingProps to memoizedProps in this case. [@sebmarkbage] [Fiber] Refactor bailoutOnFinishedWork #8613
• Does replaceState remove any previous callbacks scheduled? [@acdlite]
• Root fiber should use updateQueue instead of pendingProps. [@acdlite]
• [fb] Ensure that we get the current props for controlled components in restoreStateIfNeeded. [@spicyj] Use latest instance when restoring controlled state #8443
• [fb] Iterable children. (E.g. immutable.js / Set etc.) [@gaearon [Fiber] Support iterables #8446]
• [fb] Reuse HostText when bailing out [@sebmarkbage] [Fiber] Handle Bailed Out HostText update and MultiChildText test #8371
• [fb] Ensure that renderSubtreeIntoContainer twice enables the context to pass through the middle subtree. I.e. two nested layer with a single context provider at the very top. [@spicyj] Fix context getting #8407
• Make HostContainer append/insert/remove child instead of always updating all. Detach .return when a child gets unmounted (removed). [@sebmarkbage] [Fiber] Update root children using appendChild/insertBefore/removeChild #8400
• Handle selection restoration Preserve scroll position when restoring focus #8401 Restore DOM selection and suppress events #8353
• Swap out the active Fiber when a host node is updated - including if listeners change so that we can know which listener is active. This needs to remain even when prepareUpdate is fixed.
• Remove traversal of .output. [Fiber] Remove output field #8406
• findDOMNode and findAllInRenderedTree are broken. If an insertion happens and we happen to look at the previous work in progress, then it will not have any deletes or removes. So it looks like it is current. I assume the same can happen for a deletion after it is done. [@sebmarkbage] [Fiber] Fix findDOMNode and findAllInRenderedTree #8450
• [fb] Batch different roots together into one commit (ReactUpdates-test) Won't fix. Use Portals instead. Use Portals to test batching across roots #8508
• Error handling when an error is thrown in detachRef callbacks. [@acdlite]
• Ensure that if we walk up .return in TreeTraversal we always get the current Fiber for props, or possibly just walk up the parentNode tree instead. [@sebmarkbage] [Fiber] Read Event Handlers from the "Current" Fiber #8491
• Ensure that when we switch on tag names, we cover mixed/upper case. E.g. React.createElement('INPUT'). Won't fix. Instead, we'll warn if upper case is used on HTML tags. [@sebmarkbage] Drop runtime validation and lower case coercion of tag names #8563
• Some scheduling issue is causing ReactCompositeComponentNestedState-test to fail. It performs the first setState before the second one. Will any of the Task priority stuff fix this? (@acdlite)
• [fb] Scheduling an update during render doesn't work. We mostly already warn if setState is called from render, but it might required that componentWillMount (and others) calling a callback which sets state on a different component works. Currently the complete phase resets both the updateQueue and pending priority. This can cause infinite loops to happen. Apparently still used. We need to either warn/log better and upgrade everyone or support it in Fiber. [@acdlite]
• Top-level context push/pop isn't properly matched up; lots of tests fail if you patch in this. HostRoot no longer pops context provider during complete phase #8568 [@bvaughn]
• [fb] Reentrant mounting in synchronous mode [@spicyj Fiber: Fix reentrant mounting in synchronous mode #8623]

Phase 5

• Feature flag to disable Fiber-only features [@acdlite] [Fiber] disableNewFiberFeatures bugfix: host component children arrays #8797
• Polyfills or alternate paths for Map, requestAnimationFrame and requestIdleCallback. [@sebmarkbage] Polyfill requestIdleCallback when native is not available #8833
• isMounted - technically not deprecated yet. [Fiber] Implement findDOMNode and isMounted #8083 [@sebmarkbage]
• Top level render callbacks. Second argument to render. [Fiber] Add top level render callbacks into ReactDOMFiber and ReactNoop #8102 [@koba04]
• Ensure that server rendering works using Stack when Fiber is enabled. [[Fiber] Make server rendering tests pass #8372]
• Declarative portal API @gaearon [Fiber] Add ReactDOMFiber.unstable_createPortal() #8386
  • Add tests for event bubbling (This will need to track Attach event listeners at the root of the tree instead of document #8117 for changes to how top level event listeners get attached.)
• React Test Renderer support. (@iamdustan Fiber test renderer #8628)
• React ART support. New fiber-based ReactART renderer #8521 (@bvaughn)
• Land basic React Native support in React repo. ReactNative fiber renderer #8560 (@bvaughn)
• Mark root renders during mount (perf testing) (see tests for "marks top-level updates") [@bvaughn] Fiber logs timing for HostRoot if logTopLevelRenders enabled #8687
• Merge callbackList onto the updateQueue instead of a separate field. [@acdlite] [Fiber] Remove callbackList field from Fiber #8728
• Separate priority level for state updates. [Fiber] Separate priority field for pending updates #7457 [@acdlite]
• Fix coroutine issue where Fiber is passed in user space and could become stale. [@sebmarkbage] [Fiber] Simplify coroutines by making yields stateless #8840
• DOM Dev Tools [@gaearon]

Phase 6: Unit tests and known bugs push

• [fb] Fix findDOMNode bug when used in certain cases from componentWillUnmount. [@sebmarkbage, @acdlite] [Fiber] Fix findDOMNode algorithm #8897
• [fb] Provide ability to block event bubbling in portals [@spicyj]
• Unit tests: ReactFragment-test invariants [@acdlite] [Fiber] Throw on plain object children #8890
• Unit tests: ReactDOMProduction-test invariant [@acdlite] Loosen assertion so it matches any production error #8907
• Unit tests: ReactEmptyComponent-test invariant [@acdlite] [Fiber] Fix formatting of invalid element invariant #8908
• Ensure we replace throw new Error with invariant calls and they have sensible messages [@acdlite] [Fiber] Replace throw new Error with invariant module #8926
• Unit tests: ReactMount-test [@acdlite] [Fiber] Mount/unmount warnings and invariants #8919
• Unit tests: ReactMultiChild-test (remove Map as children support in Stack) [@acdlite] [Fiber] Maps as keyed collections of children #8911
• Unit tests: ReactMultiChildText-test [@acdlite]
• RN: Fix event bubbling regression. [@spicyj/@bvaughn]
• Make sure Babel doesn't generate bad code (e.g. IIFE for let/const), maybe fork Babel plugin to throw [@spicyj]
• RN: Land React update in fbsource with Fiber disabled [@sebmarkbage]
• Verify Fiber works in IE on Facebook (Map / Set: open IE10/11 and make sure it works) [@spicyj]
• [fb] Figure out Ads Image Cropper issue [@spicyj]
• Unit tests: ReactDOMComponent-test [@acdlite] [Fiber] Don't test input value clean-up in Fiber #8948
• Unit tests: ReactComponentLifeCycle-test warnings (ex: fDN in render) [@acdlite] [Fiber] Component lifecycle tests #8949
• Allow assigning this.state in cWRP with warning [@acdlite] Support for assigning to this.state inside componentWillReceiveProps #9040
• Unit tests: ReactStatelessComponent-test warning [@trueadm] [Fiber] adds childContextTypes warnings for functional components #9043
• Unit tests: refs-test [@trueadm] [Fiber] fix ensure class components refs get re-assigned to emptyObject on mount #9045
• Make a new manual propTypes checker. [@acdlite] API for checking external objects against React prop types #9004
• Unit tests: ReactCompositeComponent-test warnings (ex: setState in render) [@acdlite] [Fiber] ReactCompositeComponent-test.js #8950
• Ensure "break on all/uncaught exceptions" works as expected in browsers [@acdlite] [Fiber] Preserve "Break on all/uncaught exceptions" behavior in DEV mode #8961
• Investigate what modules and unit tests fail if we remove Stack [@trueadm] [Fiber] Investigation: what internals have direct dependencies on Stack modules? #9069
• Quick investigation into FB require.js perf [@trueadm]
• Quick investigation into Fiber bundle perf, cutting out extra dev-only code [@trueadm] [Fiber] Split dev methods within ReactComponentTreeHook #9096
• [fb] Move .hidden check into hostConfig (https://fburl.com/m8juo29d, https://fburl.com/538fgu7g)

---

Phase 6.1: 15.5 Release

• Warn (throw?) when doing an update on a container that was manually emptied outside of React (in stack, this mounted a brand-new tree; in fiber, it tries to apply an update and usually fails) [@keyanzhang, @sebmarkbage took over this] (blocks beta)
• Extract propTypes into a separate npm package. Get prop-types package name. [@acdlite]
• Unit tests: ReactContextValidator-test -- Pass the correct previous context to componentDidUpdate (or deprecate feature and remove test). [@bvaughn] Pass prevContext param to componentDidUpdate #8631
• [fb] Better fix to ReactART.Text.
• Update warning when calling propTypes directly to refer user to checkPropTypes API
• Docs updates for test utils and removed add-ons [@flarnie]

Phase 6.2: React Native Fiber

• Reimplement Shallow Renderer without Stack dependencies [@lelandrichardson/@trueadm] Add createComponentMock option to test renderer #8982
• RN: ensure we keep all important invariants (such as that text must be wrapped in <Text>) (does not block anything but we should do this)
• Ensure that we call the FB specific warning module instead of the fbjs/lib/warning one in RN. [@spicyj] (doesn't block anything OSS, internal to FB)
• Convert propTypes callers to use checkPropTypes. [@acdlite]
• Deploy forwarding modules to react/lib/ReactCurrentOwner, react/lib/ReactComponentTreeHook, fbjs/lib/invariant, fbjs/lib/warning, fbjs/lib/ExecutionEnvironment, fbjs/lib/performanceNow, fbjs/lib/emptyObject, fbjs/lib/emptyFunction, fbjs/lib/shallowEqual. So that we can keep using providesModule in this repo until we have flat bundles. Or better yet: Do the inverse and switch to using CommonJS naming convention in www. [@sebmarkbage, @bvaughn]
• See if we can codemod createStrictPropTypeChecker away and use exactShape instead. (doesn't block OSS release)
• Release a new version of react-redux whose peer is compatible with 16-alpha. Update RN to use it. Add React 16 as a valid peer dep reduxjs/react-redux#629
• Enable prepareNewChildrenBeforeUnmountInStack feature flag (one week after landing sync).
• Codemod Flow errors yielded by properly typing findNodeHandle. (we added types and $FlowFixMe comments; good enough for now)
• Redesign the host component "type", the type of host component refs and integration with NativeMethodsMixin to be upgrade compatible. [@bvaughn]
  • Unblocks: RN Dev Tools [@gaearon] [WIP] Fixes for ReactNative on Fiber react-devtools#528
  • Unblocks: RN Inspector (see known issues section of PR ReactNative fiber renderer #8560) [@gaearon] [WIP][Not for merge] Support Inspector in Fiber react-native#12421
• Make sure instanceProps in ReactNativeComponentTree doesn't leak. (@sebmarkbage, @bvaughn)

Phase 6.3: Flat Bundles/Rollup

• Make React Perf work with Fiber (ReactPerf-test) [@gaearon] (Decided not to in favor of deeper timeline integration)
• Unit tests: ReactComponentTreeHook-test [@gaearon]
• Unit tests: ReactHostOperationHistoryHook-test [@gaearon]
• Make a list of all internal React modules required by FB code
• Come up with a better strategy for dealing with DEV code and make sure we don't ship it in prod
• Change www sync script https://fburl.com/juffnc9d to run rollup using commonjs source
  • Shimming the required files (ex: ReactDOMInjection, warning)
  • Exporting a single bundle that exposes the internals we need
  • Make fowarding modules for ReactDOM/etc as well as internal modules
• Convert OSS repo to ES6 modules (does not block release; nice-to-have follow up)
• Make separate dev and non-dev build in one file for www (if (__DEV__) { ... all of React ... } else { ... all of React })
• Convert OSS repo to rollup
• Replace current Grunt/Gulp build system with a unified build system (maybe purely using Rollup)
• Add Closure Compiler with ADVANCED and deal with mangling properly (does not block release; nice-to-have follow up)

Phase 7: Async-Compatible (does not block release)

• Fix incremental regression (if it is a regression)
• [fb] Fix resumeMountClassInstance so that newProps gets passed to construct class. Otherwise this.props can be null.
• RN: Aborting async work or unmounting a tree due to an error leaks native views
• Add cross-renderer support for portals (necessary for async ART)
• ReactDOMFiber.render - Return the root instance from render even if priority is deferred. Test and cover incremental cases
• Decide on replacing priorities with deadlines to fix starvation

Phase 8: Server-Side Rendering

• What are we doing?
• Unit tests: ReactRenderDocument-test (SSR) -- Reviving server rendered markup (including rendering into document and shadow DOM containers)

Phase 9: Improvements (does not block release)

• The getPublicInstance internal API should consistently be used before exposing any stateNodes.
  • See Fix ReactFiberReconciler annotation to include PI #8751 (comment)
• Key-warnings on fragments. [@flarnie]
• Don't mark "update" effect on newly mounted components unless they have a componentDidMount life-cycle.
• Add support to Enzyme for Fiber (Refactor enzyme to use Adapters, initial React 16 support enzymejs/enzyme#1007)
• Currently bailing out on equal props/state equality means that we still copy all of our children, and traverse all of them. Meaning that a parent with many children will still do a lot of work even if it bails out / "skips". If "pendingWorkPriority" on referred only to children, we would know if any children has additional work. [@acdlite] [Fiber] Change work priority to represent the priority of the child #8716
• Unit tests: ReactDOMTextComponent-test -- .normalize() case
• Reconsider the ContentReset flag. Is there a cleaner solution for clearing out text content / innerHTML? Such as changing the insertion order
• Reconsider storing masked contexts on instances
• Revert inputValueTracking and replace with different comparison strategy. getter/setters is slow and complicated. Subscription model isn't helpful for Fiber's goals. The principle of over listening to lots of events and diffing the value is sound. We haven't shipped in OSS yet so not too hard to fix -- This will probably get pushed back to 16/17
• Fiber drops the lazy DOM insertion order. Is there a solution that isn't slow in IE11? Is it worth fixing or should we leave IE11 slow and wait for a fix in the browser? (related: [Fiber] Support SVG by adding a container stack #8417)
• Follow up from previous task ([Fiber] Remove callbackList field from Fiber #8728 (comment)): use a linked list for callbackList [@acdlite] Make callbackList a linked-list instead of an array #8752
• Ensure that it is possible to resume "incomplete" parents without rerendering. A shallow reuse. Store it on memoizedProps. Resuming "completed" parents is already possible. [@acdlite] [Fiber] Change work priority to represent the priority of the child #8716
• Move callback invariant closer to usage as requested in [Fiber] Validate that update callback is a function #8639 (comment)
• Replace some invariants with warnings to help code size Add callback validation to fiber-based renderers #8677 (comment)

[donnieflorence]

Things that I hope would also be appended to this list of features/bugs:

1. Fixing context
2. Making stateless functional components more performant
3. Learning from inferno to provide stateless function components some lifecycle hooks
4. Maybe revising/improving reacts legacy build step
5. Try to cut down react size in the major rewrite

[sophiebits]

@donnieflorence This is a list of things we need to do to get parity with the existing implementation. After we finish these we might look at adding new features.

[gaearon]

How to Help

1. Watch an intro to Fiber
2. Read about it here and here
3. Clone React repo
4. Run REACT_DOM_JEST_USE_FIBER=1 npm test to run unit tests with Fiber
5. Pick a failing test and try to fix it (unless it fits into a broader group claimed by someone in the first comment)
6. Run scripts/fiber/record-tests to verify which tests are now passing with Fiber
7. Submit a PR!

Note: Contributing is hard right now.

It will get easier once more pieces (e.g. DOM attributes and events) are in place. There will be a long trail of issues where community can really help. But if you're feeling adventurous, you can give it a go. Check out older Fiber PRs for inspiration and pieces of information. Example Fiber "easy" PR: #8156.

[stefensuhat]

will you support bind context like VueJS?. So there is no need bind function manually.

[acdlite]

@ssuhat

This is a list of things we need to do to get parity with the existing implementation. After we finish these we might look at adding new features.

#7925 (comment)

[rchanou]

@ssuhat I think they explicitly decided against this a long time ago for being too "magical". Using the experimental property initializer syntax is a nice way to deal with it; you can also try a 3rd party plugin like react-autobind.

[acdlite]

Aside from being "magical," the problem with autobinding is that there's a performance cost to binding methods, and it's wasteful to autobind the ones that don't need it.

[elyobo]

Something akin to Inferno's linkEvent would be good though, skipping binding while allowing data to be passed through. Often I find myself with code in a loop that would benefit from this, e.g.

<ul>
  {things.map(thing => (
    <li key={thing.key} onClick={() => this.doSomething(thing.id)}>{thing.something}</li>
  ))}
</ul>

Being able to drop the binding there would be nice.

[sebmarkbage]

Let's create a separate issue for any further discussions.

[flarnie]

We just moved remaining open items from 6.1-6.3 into #8854 and for now decided to archive this issue. We can open a new 'umbrella' issue or individual issues for items in phases 7-9 after we finish the 16.0 release.