[Feature Request] Can we do some Static Analysis for diff with babel ？

[coppyC]

react don't konw which prop is static，but can we get the help with babel ？

like this.

// jsx
<div className="xx" style={{height: 8}} onClick={click}>{children}</div>

// js after babel
React.createElement("div", {
  className: "xx",
  style: {height: 8} ,
  onClick: click,
  __reactDiff__: ['onClick', 'children']   // It's different in this line. 
}, children)

then, react will know, the props need to diff are only onClick and children.

Is it feasible?

[theKashey]

Sound like https://babeljs.io/docs/en/next/babel-plugin-transform-react-constant-elements.html
Please check facebook/react#3226

[coppyC]

It's different.

what I say is accelerate react diff.

function Hello(props) {
  <div className="xx" style={{height: 8}}>
    {props.children}
  </div>
}

As I know, in this example, when update the component, react in order to do the diff algorithm, will compare the className, style and children

but the className and style don't use any variables, they don't need to diff.

And react can't judge "Are className is constant value?", then react will compare className

so I think can Babel tell react, what need to compare.

[theKashey]

an extra operation to check what shall be compared might take more time than the actual compare.

[coppyC]

I can't understand why it is an extra operation.
I think it's an other operation to replace. like this.

// (exclude Spread Operator like `<div {...props}></div>`)

Object.keys(props).forEach(key => {
  // compare
})

// `dynamicProps` is an string array that babel generate
dynamicProps.forEach(keys => {
  // compare
})

I think dynamicProps.length <= Object.keys(props).length

Actually, many components are constant, they event don't need to compare.

[NE-SmallTown]

As I know, in this example, when update the component, react in order to do the diff algorithm, will compare the className, style and children

No, React will just use === to compare the props object, not iterate it

But back to your concerned topic, from my personal perspective, the static/runtime compiler optimization will not be the key goal of React. It has tried prepack and find that is not the way to go, It will provide/figure out a different way to do the 'optimization' based on the UI(research) and (runtime)Js and UX/DX just like they did before(JIT, heuristic, mount/update hooks, JND, GC, something for V8, ...)

[coppyC]

ok, I understand . Thanks.