ReactJS Anti Pattern　~useEffect~

・One of the most common anti-patterns is when developers manage a state that can be calculated using props or other states. function Component({ firstName, lastName }) { const [fullName, setFullName] = useState(''); useEffect(() => { setFullName(firstName + ' ' + lastName); }, [firstName, lastName]); // ... } function Component() { const [firstName, setFirstName] = useState(''); const [lastName, setLastName] = useState(''); const [fullName, setFullName] = useState(''); useEffect(() => { setFullName(firstName + ' ' + lastName); }, [firstName, lastName]); // ... } The downside is as follows : This code reduces the performance of the application by carrying out unnecessary renders. This code reduces readability. This is a simple, readable fixed code. function Component({ firstName, lastName }) { // Good const fullName = firstName + ' ' + lastName; // ... }