Optimizing Compiler: Component Folding

This is like the final frontier for React but I never really wrote anything about it so I figured I'd create an issue. Basically, the idea is to utilize information about how React works to do [constant folding](https://en.wikipedia.org/wiki/Constant_folding) and [inlining](https://en.wikipedia.org/wiki/Inline_expansion) of components under certain conditions. Example Source: ``` js function Foo(props) { if (props.data.type === 'img') { return <img src={props.data.src} className={props.className} alt={props.alt} />; } return <span>{props.data.type}</span>; } Foo.defaultProps = { alt: "An image of Foo." }; ``` ``` js var CSSClasses = { bar: 'bar' }; module.exports = CSSClasses; ``` ``` js var Foo = require('Foo'); var Classes = require('Classes'); function Bar(props) { return <Foo data={{ type: 'img', src: props.src }} className={Classes.bar} />; } ``` By knowing what Foo and Classes is made up of, we can turn the Bar component into this: ``` js var Foo = require('Foo'); var Classes = require('Classes'); function Bar(props) { return <Foo data={{ type: 'img', src: props.src }} className={Classes.bar} />; } function Bar_optimized(props) { return <img src={props.src} className="Bar" alt="An image of Foo." />; } ``` [Dead-code elimination](https://en.wikipedia.org/wiki/Dead_code_elimination) then strips it down to just: ``` js function Bar_optimized(props) { return <img src={props.src} className="Bar" alt="An image of Foo." />; } ``` Now there are a

Posted by sebmarkbage on Jul 21, 2016, 12:21 AM

Tags

• reliability (Software)

Related issues

• [BUG] Cowork (Windows): all Plan9 shares fail with "Plan9 mount failed: invalid argument" after Windows update KB5124008 (26200.9445) — uninstalling the KB fixe
• Feature Request: Auto-resume CLI session when usage limit resets
• Please deobfuscate the Python
• [Bug] MLX version of Gemma 4 26B fails to load: "Model type gemma4 not supported" (macOS)
• # 233 Developers Discussed Abandoning the Office Add-in Platform — An Open Letter on the Office.js Stability, Security & Trust Crisis
• [FEATURE] Allow users to configure which shell the Bash tool uses or inherit initial shell