message: custom hook completed
diff: import React from "react";
  -export const MyComponent = () => {
  +const useUserCollection = () => {
  const [filter, setFilter] = React.useState("");
  const [userCollection, setUserCollection] = React.useState([]);
  - // Load full list when the component gets mounted and filter gets updated
  - React.useEffect(() => {
  + const loadUsers = () => {
  fetch(`https://jsonplaceholder.typicode.com/users?name_like=${filter}`)
  .then((response) => response.json())
  .then((json) => setUserCollection(json));
  + };
  +
  + return { userCollection, loadUsers, filter, setFilter };
  +};
  +
  +export const MyComponent = () => {
  + const { userCollection, loadUsers, filter, setFilter } = useUserCollection();
  +
  + React.useEffect(() => {
  + loadUsers();
  }, [filter]);
  return (
  