IMPORTANT This package is experimental
This is replacer for standard React.createElement
function. It will detect whether the component is functional or not and if component is functional it will render it as function. On other hand if component is not functional it will render it as usual with same speed.
Rendering functional components as functions is good for performance optimisations in most cases. So if you use functional components in your app this package will speed it up. But if you don't have any this package is not for you.
Install this package
npm install --save-dev create-element-functional
Many build tools have ability to replace React.createElement
by your own function, such as babel
or even typescript
. You just need to specify that replacer name with renderer
function name from that package.
Example (babel
):
You need to use babel-plugin-transform-react-jsx
to be able to replace standard React.createElement
function call.
/* any/file.js */
import React from 'react';
import functionalCreateElement from 'create-element-functional';
const App = () => <div>Hello World</div>;
const renderedApp = <App />;
/* .babelrc */
{
"plugins": [
[
"babel-plugin-transform-react-jsx", {
"pragma": "functionalCreateElement"
}
]
]
}
You can also use babel-plugin-jsx-pragmatic
to not to import that package to every file with JSX.
/* .babelrc */
{
"plugins": [
[
"transform-react-jsx", {
"pragma": "functionalCreateElement"
}
],
[
"babel-plugin-jsx-pragmatic", {
"module": "create-element-functional",
"import": "functionalCreateElement"
}
]
]
}
Before you start use your funcional components as functions you have to change them a bit.
You need to add key
prop to every functional component you use and use that prop in high-level component inside that functional component.
const before = ({ ...props }) => <div>{props.children}</div>;
const after = ({ key, ...props }) => <div key={key}>{props.children}</div>;
You need to do that because now functional components are not components at all. They are just functions that return components or JSX
elements and have no key
prop.
Sometimes it's really neede to use functional components as components. To do that you will have to create new class component and make render
method of that class to return result of functional component.
import React from 'react';
const FunctionalComponent = ({ key, ...props }) => <div key={key}>{props.children}</div>;
class ClassicalComponent extends React.Component {
render() {
return <FunctionalComponent {...this.props} />;
}
}
Feel free to submit any bug or issue or create PR. Any help wanted