通常 named function を使用する。
export function MyComponent() { return <></>; }
export const = MyComponent () => { return <></>; }
React.memoは、アロー関数を使用する。
import { memo } from 'react' const MyComponent = memo((props: Props) => {</>})
親コンポーネントを少なくする
適切にメモ化する
単一の情報源ではない
const [todos, setTodos] = useState<Todo[]>([]); const [completedTodos, setCompletedTodos] = useState<Todo[]>([]);
Bad Habits of Mid-Level React Developers - DEV Community 👩💻👨💻
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]) );