Syntax

通常 named function を使用する。

export function MyComponent() {
  return <></>;
}

export const = MyComponent () => {
  return <></>;
}

React.memoは、アロー関数を使用する。

import { memo } from 'react'

const MyComponent = memo((props: Props) => {</>})

ReactRouter のパフォーマンスチューニング

React Rerendering を抑える

• 親コンポーネントを少なくする

• 適切にメモ化する

• React の再レンダリングを防ぐ 3 つのパターン

Bad case

単一の情報源ではない

const [todos, setTodos] = useState<Todo[]>([]);
const [completedTodos, setCompletedTodos] = useState<Todo[]>([]);

Bad Habits of Mid-Level React Developers - DEV Community 👩‍💻👨‍💻

useSelector のメモ化

import { useSelector, useDispatch } from 'react-redux';
import { createSelector } from 'reselect';

const selectData = createSelector(
  (state) => state.data,
  (data) => data
);

function MyComponent() {
  const data = useSelector(selectData);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Data: {data}</h1>
      <button
        onClick={() => dispatch({ type: 'UPDATE_DATA', payload: 'new data' })}
      >
        Update Data
      </button>
    </div>
  );
}

// ファイル書き込み
fs.appendFileSync(
  'open-ai.log',
  dataObj.choices[0].text.replace(/\n/, '[NEWLINE]')
);

micro soft onopen

or

const allUsers = useSelector((state) => state.account.allUsers);
const mappedUsers = Object.fromEntries(
  allUsers.map((user) => [user._id, user])
);