ユーザーステータス関数の更新
const onCreate = useCallback(() => {
const user = {
id: nextId.current,
height,
weight
}
setUsers(users.concat(user));
nextId.current += 1;
setInputs({
height: '',
wight: ''
});
}, [height, weight, users]);
const onChange = useCallback(e => {
const { name, value } = e.target;
setInputs({
...inputs,
[name]:value
})
}, [inputs]);
const onToggle = useCallback(id => {
sestUsers(
users.map(
user =>
user.id === id
? { ...user, active: !user.active }
: user
)
);
}, [users]);
const onRemove = useCallback(id => {
setUsers(users.filter(user => user.id !== id);
}, [users]);
上のコードはそれぞれのステータス変更が発生するので、アプリ.jsサブコンポーネントである様々なjsファイルから生成されたコンポーネントが再レンダリングされます.必要なものだけをレンダリングする場合は、次の最適化を行います.
import React, { useRef, useState, useMemo, useCallback } from 'react';
import UserList from './UserList';
import CreateUser from './CreateUser';
function countActiveUsers(users) {
console.log('활성 사용자 수를 세는중...');
return users.filter(user => user.active).length;
}
function App() {
const [inputs, setInputs] = useState({
height: '',
weight: ''
});
const { height, weight } = inputs;
const [users, setUsers] = useState([
{
id: 1,
height: 185,
weight: 75,
active: false,
},
{
id: 2,
height: 167,
weight: 50,
active: false,
},
{
id: 3,
height: 173,
weight: 80,
active: false,
}
]);
const nextId = useRef(4);
const onCreate = useCallback(() => {
const user = {
id: nextId.current,
height,
weight
}
setUsers(users => users.concat(user));
nextId.current += 1;
setInputs({
height: '',
weight: ''
});
}, [height, weight]);
const onChange = useCallback(e => {
const { name, value } = e.target;
setInputs(inputs => ({
...inputs,
[name]: value
}));
}, []);
const onToggle = useCallback(id => {
setUsers(users =>
users.map(
user =>
user.id === id
? { ...user, active: !user.active }
: user
)
);
}, []);
const onRemove = useCallback(id => {
setUsers(users => users.filter(user => user.id !== id);
}, []);
const count = useMemo(() => countActiveUsers(users), [users]);
return (
<>
<CreateUser
height={height}
weight={weight}
onCreate={onCreate}
onChange={onChange}
/>
<UserList users={users} onToggle={onToggle} onRemove={onRemove} />
<div>
<b>활성 사용자 수 :</b>{count}
</div>
</>
);
}
export default App;
このように関数の更新を行うと、アプリケーションが変更されてもcallback側は再レンダリングされません.[]には変更されたステータスが含まれていないためです.したがって、レンダリング回数を減らすには、関数更新が必要です.
Reference
この問題について(ユーザーステータス関数の更新), 我々は、より多くの情報をここで見つけました https://velog.io/@yunsungyang-omc/React-useState-함수형-업데이트テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol