Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Experiment with using an object literal for Fiber creation #28734

Merged
merged 1 commit into from
Jul 10, 2024

Conversation

kassens
Copy link
Member

@kassens kassens commented Apr 3, 2024

Object literals should be faster at least on React Native with Hermes as the JS engine.
It might also be interesting to confirm the old comments in this file from years ago are even still valid. Creating an object from a literal should be a simpler operation.

It's a bit unfortunate that this introduces a bunch of copied code, but since we rearely update the fields on fibers, this seems like an okay tradeoff for a hot code path. An alternative would be some sort of macro system, but that doesn't seem worth the extra complexity.

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Apr 3, 2024
@kassens kassens force-pushed the pr28734 branch 2 times, most recently from 834d891 to 16e5343 Compare April 3, 2024 18:08
@react-sizebot
Copy link

react-sizebot commented Apr 3, 2024

Comparing: e02baf6...f349060

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.js = 6.68 kB 6.68 kB +0.05% 1.83 kB 1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js +0.04% 497.99 kB 498.19 kB +0.04% 89.27 kB 89.30 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.69 kB 6.69 kB +0.05% 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js +0.04% 502.81 kB 503.00 kB +0.04% 89.97 kB 90.01 kB
facebook-www/ReactDOM-prod.classic.js +0.04% 597.08 kB 597.30 kB +0.02% 105.33 kB 105.36 kB
facebook-www/ReactDOM-prod.modern.js +0.04% 571.42 kB 571.64 kB +0.02% 101.27 kB 101.29 kB
test_utils/ReactAllWarnings.js Deleted 62.88 kB 0.00 kB Deleted 15.69 kB 0.00 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
test_utils/ReactAllWarnings.js Deleted 62.88 kB 0.00 kB Deleted 15.69 kB 0.00 kB

Generated by 🚫 dangerJS against f349060

@kassens kassens requested review from sebmarkbage and acdlite April 3, 2024 18:13
@kassens kassens marked this pull request as ready for review April 3, 2024 18:29
@josephsavona
Copy link
Contributor

Awesome! It definitely makes sense to proceed if we can confirm that this is a perf win on Hermes. It should be given our earlier profiling results but let's check first?

Copy link

vercel bot commented Jun 21, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-compiler-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 10, 2024 8:33pm

@kassens
Copy link
Member Author

kassens commented Jun 27, 2024

The RN code from prod looks like this:

function FiberNode(tag, pendingProps, key, mode) {
  this.tag = tag;
  this.key = key;
  this.sibling =
    this.child =
    this.return =
    this.stateNode =
    this.type =
    this.elementType =
      null;
  this.index = 0;
  this.refCleanup = this.ref = null;
  this.pendingProps = pendingProps;
  this.dependencies =
    this.memoizedState =
    this.updateQueue =
    this.memoizedProps =
      null;
  this.mode = mode;
  this.subtreeFlags = this.flags = 0;
  this.deletions = null;
  this.childLanes = this.lanes = 0;
  this.alternate = null;
}
function createFiberImplClass(tag, pendingProps, key, mode) {
  return new FiberNode(tag, pendingProps, key, mode);
}
function createFiberImplObject(tag, pendingProps, key, mode) {
  return {
    tag: tag,
    key: key,
    elementType: null,
    type: null,
    stateNode: null,
    return: null,
    child: null,
    sibling: null,
    index: 0,
    ref: null,
    refCleanup: null,
    pendingProps: pendingProps,
    memoizedProps: null,
    updateQueue: null,
    memoizedState: null,
    dependencies: null,
    mode: mode,
    flags: 0,
    subtreeFlags: 0,
    deletions: null,
    lanes: 0,
    childLanes: 0,
    alternate: null
  };
}
var createFiber = enableObjectFiber
  ? createFiberImplObject
  : createFiberImplClass;

Copy link
Contributor

@gsathya gsathya left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! I wonder if we should just unify it to be an object literal -- is the object literal slower on v8? I'm happy to profile this in v8 too

Object literals should be faster at least on React Native with Hermes as the JS engine.
It might also be interesting to confirm the old comments in this file from years ago are even still valid. Creating an object from a literal should be a simpler operation.

It's a bit unfortunate that this introduces a bunch of copied code, but since we rearely update the fields on fibers, this seems like an okay tradeoff for a hot code path. An alternative would be some sort of macro system, but that doesn't seem worth the extra complexity.
@kassens kassens merged commit fe98289 into facebook:main Jul 10, 2024
254 checks passed
@kassens kassens deleted the pr28734 branch July 10, 2024 20:42
github-actions bot pushed a commit that referenced this pull request Jul 10, 2024
Object literals should be faster at least on React Native with Hermes as
the JS engine.
It might also be interesting to confirm the old comments in this file
from years ago are even still valid. Creating an object from a literal
should be a simpler operation.

It's a bit unfortunate that this introduces a bunch of copied code, but
since we rearely update the fields on fibers, this seems like an okay
tradeoff for a hot code path. An alternative would be some sort of macro
system, but that doesn't seem worth the extra complexity.

DiffTrain build for [fe98289](fe98289)
github-actions bot pushed a commit that referenced this pull request Jul 10, 2024
Object literals should be faster at least on React Native with Hermes as
the JS engine.
It might also be interesting to confirm the old comments in this file
from years ago are even still valid. Creating an object from a literal
should be a simpler operation.

It's a bit unfortunate that this introduces a bunch of copied code, but
since we rearely update the fields on fibers, this seems like an okay
tradeoff for a hot code path. An alternative would be some sort of macro
system, but that doesn't seem worth the extra complexity.

DiffTrain build for commit fe98289.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants