React.js ~Clean Code Practical Use~

Source: Dev.to

              [![Ogasawara Kakeru](https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2091087%2F848260f3-b067-4b18-8dbc-34f77d4456a3.jpg)](https://dev.to/kkr0423)
              
              
            
      

      
            

1. The codebase should be created for concentrating on <>JSX Section

-The JSX section can often be modified after release.

Separate a data-fetching section from the view section.

// NG🤔 You can not comprehend the important point intuitively.
const Area = () => {
  const [user, setUser] = useState();

  useEffect(() => {
    const fetchUser = async (): Promise => {
      const response = await GetUser();
      setUser(response);
    };
    fetchUser();
  }, []);

  return <>{user.name};
};

// Good😎 Separate a data-fetching section from the view section.
const useUser = (): User | undefined => {
  const [user, setUser] = useState();
  useEffect(() => {
    const fetchUser = async (): Promise => {
      const response = await GetUser();
      setUser(response);
    };
    fetchUser();
  }, []);

  return user;
};

// A component for showing data.
const Area = () => {
  const user = useUser();

  return <>{user?.name};
};

Enter fullscreen mode


Exit fullscreen mode

2. Don’t use too many useState for data-input

// NG🤔 What is going to happen if the `input` element continues to increase...
const UserForm = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const changeName = (e) => setName(e.target.value);
  const changeEmail = (e) => setEmail(e.target.value);

  return (
    
      
      
      
    
  );
};

// Good😎 Manage submit data in a user object.
const UserForm = () => {
  const [user, setUser] = useState({ name: '', email: '' });

  const changeName = (e) =>
    setUser((state) => ({ ...user, name: e.target.value }));

  const changeEmail = (e) =>
    setUser((state) => ({ ...user, email: e.target.value }));

  return (
    
      
      
      
    
  );
};

// Cool😎: Take advantage of useForm
const UserForm = () => {
   const { register} = useForm();

  return (
    
      
      
      
    
  );
};

Enter fullscreen mode


Exit fullscreen mode

3. Insert a default value to an optional one

type Props = {
  name: string;
  isDisplayNone?: boolean; // An optional props
};

// NG🤔: Defined as isDisplayNone = undefined
const UserCard: FC = ({ name, isDisplayNone }) => (
  {name}
);

// Good😎: Defined as isDisplayNone = false 
const UserCard: FC = ({ name, isDisplayNone = false }) => (
  {name}
);

//　When showing isDisplayNone　undefined -> false
;
//　When not showing isDisplayNone true
;

Enter fullscreen mode


Exit fullscreen mode

4. Pay attention to import statement

/* NG🤔
├── Layout
    ├── Header.tsx
    └── Footer.tsx
*/
// page.tsx import files separately
import Header from './Layout/Header';
import Footer from './Layout/Footer';

/* Good🥴
├── Layout
    ├── Header.tsx
    ├── Footer.tsx
    └── index.tsx
*/
// index.tsx
export { default as Header } from './Header';
export { default as Footer } from './Footer';

// page.tsx　import as a chunk
import { Footer, Header } from './Layout';

Enter fullscreen mode


Exit fullscreen mode

Allow importing from the same path everywhere.

// NG:
import { Footer, Header } from '../../../../Layout';

// Good:😎
import { Footer, Header } from '@components/Layout';

Enter fullscreen mode


Exit fullscreen mode

5. Make use of array methods

const data = [1,2,10]
const isIncludedNumber2 = data.includes(2);
const isIncludedNumber2Or3 = data.some((item) => item === 2 || item === 3);
const number3= data.find((item) => item === 3);
const numbersLargerThan2 = data.filter((item) => item > 2);
const totalNumber = data.reduce((sum, num) => sum + num, 0);

Enter fullscreen mode


Exit fullscreen mode

6. Centerize how to manage unique values of the service

• If values defined specifically for the service are written directly into the code, it becomes difficult to understand.

Is the code written in a way that prevents misunderstandings?

// NG🤔 status: What does the 0 mean?
const CheckStatus = (status: number) => {
  if (status === 0) {
    return true;
  }
  return false;
};

// Good🥴
const Status = {
  Invalid: 0,
  Valid: 1,
} as const;

type StatusLiteral = typeof Status[keyof typeof Status]; // 0 | 1

const CheckStatus = (status: StatusLiteral) => {
  if (status === Status.Invalid) {
    return true;
  }
  return false;
};

Enter fullscreen mode


Exit fullscreen mode