@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;
• ✅ apply-default-to-jsx-string;
• ✅ convert-named-to-default-in-react-test-renderer;
• ✅ remove-useless-provider;
• ✅ remove-useless-forward-ref;
• ✅ remove-implicit-ref-return;
• ✅ rename-file-js-to-jsx;
• ✅ rename-file-jsx-to-js;

Filesystem

• ✅ apply-jsx-to-imported-file;

Config

Here is list of rules:

{
    "rules": {
        "react/apply-create-root": "on",
        "react/apply-jsx-to-imported-file": "off",
        "react/apply-default-to-jsx-string": "on",
        "react/convert-named-to-default-in-react-test-renderer": "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/>);

apply-default-to-jsx-string

Check out in 🐊Putout Editor.

❌ Example of incorrect code

import toJsxString from 'react-element-to-jsx-string';

✅ Example of correct code

import toJsxStringDefault from 'react-element-to-jsx-string';

const {default: toJsxString} = reactElementToJSXStringDefault;

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

apply-jsx-to-imported-file

Checkout in 🐊Putout Editor:

• ✅ get-imports;
• ✅ change-imports;

Let's consider file structure:

/
└── lib/
    ├── index.js
    └── a.jsx

In this case index.js can be fixed:

❌ Example of incorrect code

import a from './a.js';

✅ Example of correct code

import a from './a.jsx';

convert-named-to-default-in-react-test-renderer

Checkout in 🐊Putout Editor.

❌ Example of incorrect code

import {createRenderer} from 'react-test-renderer/shallow';

✅ Example of correct code

import reactTestRenderer from 'react-test-renderer/shallow.js';

const {createRenderer} = reactTestRenderer;

License

MIT