Timur Kostenko

Посмотри здесь https://www.netlify.com/blog/2019/03/11/deep-dive-... здесь это хорошо объясняется, по производительности тут https://medium.com/@maafaishal/react-class-compone...

У тебя есть синхронный код, который блочит рендер, попробуй такой вариант,

export const usePagination = (users = [], defaultPage = 1, amountPerPage = 10) => {
  const [currentPage, setCurrentPage] = useState(defaultPage);
  const [currentPosts, setCurrentPosts] = useState([]);
  const [amountOfPages, setAmountOfPages] = useState(0);

  useEffect(() => {
    updatePosts();
    updateAmountOfPages();
  }, []);

  const updatePosts = () => {
    const indexOfLastPost = currentPage * amountPerPage;
    const indexOfFirstPost = indexOfLastPost - amountPerPage;
    const updatedUsers = users.slice(indexOfFirstPost, indexOfLastPost);
    setCurrentPosts(updatedUsers);
  };

  const updateAmountOfPages = () => {
    const updatedAmount = Math.ceil(users.length / amountPerPage);
    setAmountOfPages(updatedAmount);
  };

  return {
    setCurrentPage,
    amountOfPages,
    currentPosts,
  };
};

const Pagination = ({amountOfPages, setCurrentPage}) => {
  const [pageNumbers, setPageNumbers] = useState([]);

  useEffect(() => {
    calculatePageNumbers();
  }, [amountOfPages]);

  function calculatePageNumbers() {
    const updatedPageNumbers = [];
    for (let i = 1; i <= amountOfPages; i++) {
      updatedPageNumbers.push(i);
    }
    setPageNumbers(updatedPageNumbers);
  }

  function handleSetCurrentPage(number) {
    return () => {
      setCurrentPage(number);
    }
  }

  return (
    <nav>
      <ul className="pagination">
        {pageNumbers.map(number => (
          <li key={number} className="page-item">
            <button
              onClick={handleSetCurrentPage(number)}
              type="button"
              className="page-link"
            >
              {number}
            </button>
          </li>
        ))}
      </ul>
    </nav>
  );
};

<header class="header">
  <div class="header__logo">logo</div>
  <div class="header__controlls">
    <nav class="nav header__nav">
      <ul class="nav__list">
        ...
        <li class="nav__list-item">nav item</li>
      </ul>
    </nav>
    <div class="header__buttons">
      <button class="button">Войти</button>
      <button class="button button--primary">Зарегистрироваться</button>
    </div>
  </div>
</header>

Попробуй импортировать таким образом
import * as firebase from 'firebase';

Вы не правы, фронтенд сейчас актуален как никогда. Сайты на конструкторе нужны в основном чтобы что-то побыстрее продать, это больше для маркетинга. Реальные же приложения и сервисы пишутся своими руками и с нуля, поскольку много нюансов которые нужно знать и применять. К слову, бэкенд никогда не потеряет актуальности, поскольку это чистая работа с данными, то есть фундамент.