@putout/plugin-react
v1.3.0
Published
🐊Putout plugin helps to migrate to new version of React
Downloads
56
Maintainers
Readme
@putout/plugin-react
The library for web and native user interfaces
(c) react.dev
🐊Putout plugin helps to migrate to new version of React. Not bundled.
Install
npm i putout @putout/plugin-react-hooks -D
Add .putout.json
with:
{
"plugins": ["react"]
}
Rules
- ✅ apply-create-root;
- ✅ remove-useless-provider;
- ✅ remove-useless-forward-ref;
- ✅ remove-implicit-ref-return;
Config
Here is list of rules:
{
"rules": {
"react/apply-create-root": "on",
"react/remove-useless-provider": "on",
"react/remove-useless-forward-ref": "on",
"react/remove-implicit-ref-return": "on"
}
}
apply-create-root
ReactDOM.render()
was deprecated in March 2022 (v18.0.0). In React 19, we’re removingReactDOM.render()
and you’ll need to migrate to usingReactDOM.createRoot()
:
Check out in 🐊Putout Editor.
❌ Example of incorrect code
import {render} from 'react-dom';
render(<App/>, document.getElementById('root'));
✅ Example of correct code
import {createRoot} from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App/>);
remove-useless-provider
In React 19, you can render as a provider instead of <Context.Provider>:
Check out in 🐊Putout Editor.
❌ Example of incorrect code
function App() {
const [theme, setTheme] = useState('light');
// ...
return (
<UseTheme.Provider value={theme}>
<Page/>
</UseTheme.Provider>
);
}
✅ Example of correct code
function App() {
const [theme, setTheme] = useState('light');
// ...
return (
<UseTheme value={theme}>
<Page/>
</UseTheme>
);
}
remove-useless-forward-ref
Starting in React 19, you can now access ref as a prop for function components: New function components will no longer need
forwardRef
. In future versions we will deprecate and removeforwardRef
.
Check out in 🐊Putout Editor.
❌ Example of incorrect code
const MyInput = forwardRef((props, ref) => {
return (
<input {...props} ref={ref}/>
);
});
✅ Example of correct code
const MyInput2 = forwardRef(({value}, ref) => {
return (
<input value={value} ref={ref}/>
);
});
remove-implicit-ref-return
Due to the introduction of ref cleanup functions, returning anything else from a ref callback will now be rejected by TypeScript. The fix is usually to stop using implicit returns.
Check out in 🐊Putout Editor.
❌ Example of incorrect code
const a = (
<div ref={(current) => (instance = current)}/>
);
✅ Example of correct code
function App() {
const [theme, setTheme] = useState('light');
// ...
return (
<UseTheme value={theme}>
<Page/>
</UseTheme>
);
}
License
MIT