title: I want to run the API communication when the list is at the bottom
body: <p>There is component that displays a list of users.<br />
  It displays 10 users each.<br />
  Once I get to the bottom of the list, i want to add the next 10 items to the list.<br />
  I want it to feel like a messenger.<br />
  How can I determine the bottom of the list?</p>
  <pre><code>import React, { FunctionComponent } from 'react';
  import { User } from 'components/molecules/User';
  import { IUsers } from 'domain/room';
  
  type Props = {
    users: IUser;
    onClickUser: (id: number) =&gt; void;
  };
  export const UserList: FunctionComponent&lt;Props&gt; = ({
    users,
    onClickUser,
  }) =&gt; {
  return (
         &lt;div style={{ overflow: 'auto' }}&gt;
              {users.map((user) =&gt; (
                &lt;div key={user.id} onClick={() =&gt; onClickUser(user.id)}&gt;
                  &lt;User
                    name={user.name}
                    img={user.pictureUrl}
                    status={user.status}
                  /&gt;
                &lt;/div&gt; 
          ))}
   );
  }
  </code></pre>
  <blockquote>
  </blockquote>
  <pre><code>import { Label } from 'components/atoms/Label';
  import { RoundedIcon } from 'components/atoms/RoundedIcon';
  import React, { FunctionComponent } from 'react';
  
  type Props = {
    name: string;
    img: string;
    status: string;
  };
  
  export const User: FunctionComponent&lt;Props&gt; = ({
    name,
    img,
    status,
  }) =&gt; {
    return (
      &lt;div&gt;
          &lt;RoundedIcon size={65} url={img} /&gt;
          &lt;Label weight={700} size={14}&gt;
            {name}
          &lt;/Label&gt;
          &lt;Label size={12} height={18}&gt;
            {status}
          &lt;/Label&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>