Код-ревью на собеседовании: как найти проблемы в React-компоненте

type Comment = { id: number; author: string; html: string };

export function Comments({ postId }: { postId: number }) {
  const [comments, setComments] = useState<Comment[]>([]);
  const [query, setQuery] = useState('');
  const [filtered, setFiltered] = useState<Comment[]>([]);

  useEffect(() => {
    fetch(`/api/posts/${postId}/comments`)
      .then((r) => r.json())
      .then((data) => setComments(data));
  }, []);

  useEffect(() => {
    setFiltered(comments.filter((c) => c.author.includes(query)));
  }, [comments, query]);

  useEffect(() => {
    const id = setInterval(() => {
      fetch(`/api/posts/${postId}/comments`)
        .then((r) => r.json())
        .then((data) => setComments(data));
    }, 10000);
  }, [postId]);

  function addLocal(author: string) {
    comments.push({ id: Date.now(), author, html: '' });
    setComments(comments);
  }

  return (
    <div>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <button onClick={() => addLocal('Я')}>Добавить</button>
      {filtered.map((c, i) => (
        <div key={i}>
          <b>{c.author}</b>
          <div dangerouslySetInnerHTML={{ __html: c.html }} />
        </div>
      ))}
    </div>
  );
}

type Comment = { id: number; author: string; text: string };
type Status = 'loading' | 'ready' | 'error';

function useComments(postId: number) {
  const [comments, setComments] = useState<Comment[]>([]);
  const [status, setStatus] = useState<Status>('loading');

  useEffect(() => {
    let controller = new AbortController();

    async function load() {
      controller.abort();
      const current = new AbortController();
      controller = current;
      try {
        const r = await fetch(`/api/posts/${postId}/comments`, { signal: current.signal });
        if (!r.ok) throw new Error(`HTTP ${r.status}`);
        setComments(await r.json());
        setStatus('ready');
      } catch {
        if (!current.signal.aborted) setStatus('error');
      }
    }

    setStatus('loading');
    load();
    const id = setInterval(load, 10000);
    return () => {
      clearInterval(id);
      controller.abort();
    };
  }, [postId]);

  return { comments, setComments, status };
}

export function Comments({ postId }: { postId: number }) {
  const { comments, setComments, status } = useComments(postId);
  const [query, setQuery] = useState('');
  const filtered = comments.filter((c) => c.author.includes(query));

  function addLocal(author: string) {
    setComments((prev) => [...prev, { id: Date.now(), author, text: '' }]);
  }

  if (status === 'loading' && comments.length === 0) return <p>Загружаем комментарии</p>;
  if (status === 'error' && comments.length === 0) return <p>Не удалось загрузить комментарии</p>;

  return (
    <div>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <button onClick={() => addLocal('Я')}>Добавить</button>
      {filtered.map((c) => (
        <div key={c.id}>
          <b>{c.author}</b>
          <p>{c.text}</p>
        </div>
      ))}
    </div>
  );
}