ac-users-list.jsx

const UsersList = ({ filter, $selected }) => {
    // $users can be modified by async function after the component is unmounted.
    // We have to do something to prevent an exception. Let's do it in this custom hook.
    const $users = useSafeLink([]);

    // It's useful to know if there's an I/O peding. Another custom hook.
    const ioComplete = useIO( async () => {
        // This thing can happen after unmount.
        $users.set( await fetchUsers( filter ) );
    }, [ filter ]);

    return (
        <ul className="users-suggestions">
            { ioComplete ? $users.value.map( user => (
                <li key={user.id}
                    className={ $selected.value && $selected.value.id === user.id ? 'selected' : '' }
                    onMouseDown={ () => $selected.set( user ) }
                >
                    { userToString( user ) }
                </li>
            )) : 'Loading...' }
        </ul>
    )
}