nishimura.clubnishimura.club

React

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 を抑える

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