はじめに
不要なレンダリングを回避するための備忘録です。
よくないやりかた
NameListのpropsにオブジェクトを直で渡してしまうと、someOtherStateが変化するたびにNameListが再レンダーされてしまう。
NameList.tsx
...
export const NameList: React.FC<string[]> = ({names}) => {
return (
<>
{names.map((name, key) => (<div key={key}> {name} </div>))}
</>
)
}
Users.tsx
...
interface IUser {
name: string;
id: number;
}
const Users: React.FC<> = () => {
const [users,setUsers] = useState<IUser[]>(initialUsers)
const [someOtherState, setSomeOtherState] = useState<ISomething>(initialSomething)
return ( <NameList names={users.map(user => user.name)}> )
}
正しいやり方
NameListのpropsに渡すオブジェクトをmemo化する。そうすればsomeOtherStateが変化してもNameListは再レンダーされない。
NameList.tsx
...
export const NameList: React.FC<string[]> = ({names}) => {
return (
<>
{names.map((name, key) => (<div key={key}> {name} </div>))}
</>
)
}
Users.tsx
...
interface IUser {
name: string;
id: number;
}
const Users: React.FC<> = () => {
const [users,setUsers] = useState<IUser[]>(initialUsers)
const [someOtherState, setSomeOtherState] = useState<ISomething>(initialSomething)
// ここ！！
const names = useMemo(() => users.map(user => user.name), [users])
return ( <NameList names={names}> )
}