렌더링 최적화를 하기 위해서 컴포넌트 클래스의 경우에는 shouldComponentUpdate라는 라이프 사이클을 사용하면 된다. 하지만 함수형 컴포넌트에서는 라이프사이클 메서드를 사용할 수 없다. 그 대신 React.memo라는 함수를 사용한다. 컴포넌트의 props가 바뀌지 않는다면, 리렌더링 하지 않도록 설정하여 함수형 컴포넌트의 리렌더링 성능을 최적화해 줄 수 있다.

import React from 'react';
import { MdCheckBox, MdCheckBoxOutlineBlank, MdRemoveCircleOutline } from 'react-icons/md';
import cn from 'classnames';
import './TodoListItem.scss';

const TodoListItem = ({ todo, onRemove, onToggle }) => {
	const { id, text, checked } = todo;
	return (
		<div className='TodoListItem'>
			<div className={cn('checkbox', { checked })} onClick={() => onToggle(id)}>
				{checked ? <MdCheckBox /> : <MdCheckBoxOutlineBlank />}
				<div className='text'>{text}</div>
			</div>
			<div className='remove' onClick={() => onRemove(id)}>
				<MdRemoveCircleOutline />
			</div>
		</div>
	);
};

***export default React.memo(TodoListItem);***

또는,

import React from 'react';
import { MdCheckBox, MdCheckBoxOutlineBlank, MdRemoveCircleOutline } from 'react-icons/md';
import cn from 'classnames';
import './TodoListItem.scss';

***const TodoListItem = React.memo({ todo, onRemove, onToggle }) => {***
	const { id, text, checked } = todo;
	return (
		<div className='TodoListItem'>
			<div className={cn('checkbox', { checked })} onClick={() => onToggle(id)}>
				{checked ? <MdCheckBox /> : <MdCheckBoxOutlineBlank />}
				<div className='text'>{text}</div>
			</div>
			<div className='remove' onClick={() => onRemove(id)}>
				<MdRemoveCircleOutline />
			</div>
		</div>
	);
};

export default TodoListItem;

위와 같은 방식으로 사용할 수 있다.