@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;
• ✅ rename-file-js-to-jsx;
• ✅ rename-file-jsx-to-js;

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",
        "react/rename-file-jsx-to-js": "on",
        "react/rename-file-js-to-jsx": "on"
    }
}

apply-create-root

ReactDOM.render() was deprecated in March 2022 (v18.0.0). In React 19, we’re removing ReactDOM.render() and you’ll need to migrate to using ReactDOM.createRoot():

react.dev

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>:

react.dev

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 remove forwardRef.

react.dev

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.

react.dev

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>
    );
}

rename-file-js-to-jsx

Rename *.js files to *.jsx when they contains JSX.

 /
 |-- package.json
 `-- lib/
-     `-- hello.js
+     `-- hello.jsx

Check out in 🐊Putout Editor.

rename-file-jsx-to-js

Rename *.jsx files to *.js when they contains JSX.

 /
 |-- package.json
 `-- lib/
-     `-- hello.jsx
+     `-- hello.js

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