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;
  // ...
}