React.js ~Clean Code Intermediate~

1. Passing values simply
1-1. Receiving: Receive values as all in one.

const userInfo = {
  username: 'Jnjdunk',
  address: 'Tokyo',
  favorite: 'Travel',
};

// NG
const username = userInfo.username;
const address = userInfo.address;
const favorite = userInfo.favorite;

// 🥴 Good
const { username, address, favorite } = userInfo;

1-2. Insert: Use the abbreviation of the object.

// NG
const profile = {
  username: username,
  address: address,
  favorite: favorite,
  age: 88,
};

// 🥴 Good
//Variables must be configured above, and a value that has a specific value must be configured below.
const profile = {
  username,
  address,
  favorite,
  age: 88,
};

// 😎 Best
const age = 88;
const profile = {
  ...userInfo,
  age,
};

2. The function Component is more readable than the others

// NG　class component
class UserArea extends React.Component {
  render() {
    return <h1>Hello, {this.props.username}</h1>;
  }
}

// 🥴 Good　
const UserArea = (props) => {
  return <h1>Hello, {props.username}</h1>;
};

3. useEffect must have a single responsibility

// NG
useEffect(() => {
  const getApi1 = async () => {
    const response = await api('classinfo');
    order1(response);
  };

  const getApi2 = async () => {
    const response = await api('userinfo');
    order2(response);
    order3(response);
  };
  getApi1();
  getApi2();
}, []);

// 🥴 Good
useEffect(() => {
  const getApi = async () => {
    const response = await api('classinfo');
    order1(response);
  };
  getApi();
}, []);

useEffect(() => {
  const getApi = async () => {
    const response = await api('userinfo');
    order2(response);
    order3(response);
  };
  getApi();
}, []);

4. useEffect must be used as little as possible

// NG
// The typo can occur easily.
const [userId, setUserId] = useState();
const [userName, setUserName] = useState();
const [userAddress, setUserAddress] = useState();
const [userFavorite, setUserFavorite] = useState();

setUserId(props.userInfo.userid);
setUserName(props.userInfo.username);
setUserAddress(props.userInfo.address);
setUserFavorite(props.userInfo.favorite);

// 🥴 Good
const [userInfo, setUserInfo] = useState();
setUserInfo(props.userInfo);

// 😎 In case you want to insert a value into a specific key
const favorite = 'Eating';
setUserInfo((prevUserInfo) => ({ ...prevUserInfo, favorite }))

5. Visualizing Props

const userProfile = (props) => (
  <Box>
    {props.username}
    <span>{props.address}</span>
  </Box>
);

// 🥴 Good
const userProfile = ({ address, username }) => (
  <Box>
    {username}
    <span>{address}</span>
  </Box>
);

6. Dealing with data following a rule
useContext, props, and redux are able to create an application themselves.
You should understand each of these features.

Rules

1. useContext should be applied to shallow or wide-layered components.
   -a) default style
   -b) Header, Footer
   -c) state for something, on/off

2. When you want to use an isolated component, you should not use useContext but props.
   -a) The component depends on only it's parent component
   -b) This makes it easy to extract and reuse the component

3. When dealing with a complex update pattern, you should use Redux