React v18 migration

// Before
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);
 
// After
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />);

// Before
unmountComponentAtNode(container);
 
// After
root.unmount();

// Before
const container = document.getElementById('app');
render(<App tab="home" />, container, () => {
  console.log('rendered');
});
 
// After
function AppWithCallbackAfterRender() {
  useEffect(() => {
    console.log('rendered');
  });
 
  return <App tab="home" />;
}
 
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<AppWithCallbackAfterRender />);

{
  // ...
  "rules": {
    // ...
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off"
  }
}

# for npm users
npm update @babel/core @babel/plugin-transform-react-jsx
 
# for yarn users
yarn upgrade @babel/core @babel/plugin-transform-react-jsx

# for npm users
npm update @babel/core @babel/preset-react
 
# for yarn users
yarn upgrade @babel/core @babel/preset-react

// If you are using @babel/preset-react
{
  "presets": [
    ["@babel/preset-react", {
      "runtime": "automatic"
    }]
  ]
}
 
// If you're using @babel/plugin-transform-react-jsx
{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {
      "runtime": "automatic"
    }]
  ]
}

// general react
import React from 'react';
 
function App() {
  return <h1>Hello World</h1>;
}
 
// transpile;
function App() {
  return <h1>Hello World</h1>;
}

// custom hook
import React from 'react';
 
function App() {
  const [text, setText] = React.useState('Hello World');
  return <h1>{text}</h1>;
}
 
import { useState } from 'react';
 
function App() {
  const [text, setText] = useState('Hello World');
  return <h1>{text}</h1>;
}

export function useOutsideClick({
  callback,
}: UseOutsideClickProps) {
  const [element, setElement] = useState<HTMLElement>();
  const ref = useCallback((el) => setElement(el), []);
 
  useEffect(() => {
    const handler = (event) => {
      if (element && !element.contains(event.target)) {
        callback(event);
      }
    }
 
    if (element) {
      document.addEventListener('click', handler);
    }
 
    return () => {
      document.removeEventListener('click', handler);
    };
  }, [element, callback]);
 
  return ref;
}
 
// Actual usage example
const [isPreviewTypeListVisible, setPreviewTypeListVisible] = useState(false);
 
// Before
useEffect(() => {
  const handleDocumentClick = () => isPreviewTypeListVisible && setPreviewTypeListVisible(false);
  document.addEventListener('click', handleDocumentClick);
 
  return () => document.removeEventListener('click', handleDocumentClick);
}, [isPreviewTypeListVisible]);
 
// After
const ref = useOutsideClick({
  callback: () => setPreviewTypeListVisible(false),
});
 
<div
  ref={ref}
  className={cx(styles.container, className)}
>
	<button
	  type="button"
	  onClick={() => setPreviewTypeListVisible(!isPreviewTypeListVisible)}
	>
</div>

"resolutions": {
  ...,
  "react": "18.2.0"
}

"resolutions": {
  "@types/react": "18.2.0"
},

// Operation error in useMemo, forwardRef
if (!element) return;

// Option 1. Add the children type directly
interface Props {
  isOpened: boolean;
  handleCloseModal: () => void;
  children: ReactNode;
}
// Option 2. Use the PropsWithChildren type provided by React
function Component(props: PropsWithChildren<Props>);

const { mutate } = usePostSettlementInfo({
  onSuccess: () => {
    if (path) { // Without wrapping in flushSync, automatic batching kicks in and the state doesn't update
      ...
    }
  },
});
 
const onSubmit = handleSubmit((data) => {
    ....
    mutate(data);
  });
 
const handleSave = async (path: string) => {
  flushSync(() => {
    setPath(path);
  });
  await onSubmit();
};

// If you are using @babel/preset-react
{
  "presets": [
    ["@babel/preset-react", {
      "runtime": "automatic"
    }]
  ]
}
 
// If you're using @babel/plugin-transform-react-jsx
{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {
      "runtime": "automatic"
    }]
  ]
}

// Since the form data was reset after saving with react-hook-form, the state was set to true instead of false, resulting in a situation where the prompt message had to be handled (occurs from v18 onward)
 
<Prompt
  when={isDirty && !submited}
  message={() =>
    `You have unsaved changes, sure you want to go to leave this page? `
  }
/>