What is container and presentational component pattern? Container-Presentational pattern क्या है?

// Presentational - dumb component (UI only)
const UserList = ({ users }) => (
  <ul>
    {users.map(user => <li key={user.id}>{user.name}</li>)}
  </ul>
);

// Container - smart component (logic)
function UserListContainer() {
  const [users, setUsers] = React.useState([]);
  
  React.useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []);
  
  return <UserList users={users} />;
}