С точки зрения React, эти два компонента эквивалентны. В официальной документации React ничего не сказано о планах отказываться от компонентов классов в ближайшем будущем. Поэтому можете не беспокоиться  —  переписывать весь код вам не придётся. Но отвечая на Ваш вопрос, изучив документацию React и Medium, а также поучавствовав в коммерческих проектах, хочу отметить, что хорошей практикой будет поддержка кодовой базы в едином стиле насколько это возможно. Пусть не сразу, пусть постепенно, но переход к функциональным компонентам будет верным. Функциональные компоненты позволяют писать код элегантнee.

Советую почитать интересную свежую статью, где сравниваются функциональные и классовые компоненты и рассматриваются Хуки.

Более новые версии React могут начать добавлять в функциональные компоненты возможности несовместимые с классовыми, оставляя последние в невыгодном положении, как это было с первыми до версии 16.8.

"Мы намерены охватить все возможные варианты использования классов в хуках, но мы всё ещё будем поддерживать классовые компоненты в обозримом будущем. В Facebook десятки тысяч компонентов, написанных в виде классов, и у нас нет абсолютно никаких планов их переписывать. Вместо этого мы начинаем использовать хуки в новом коде параллельно с классами" — документация React

Для этого в React есть хук useEffect (https://ru.reactjs.org/docs/hooks-effect.html)

Чтобы получить JSON при первой загрузке страницы нужно импортировать хук useEffect. У этого хука (хук = функция) есть 2 обязательных параметра - первый это функция (callback) и второй массив зависимостей (если его оставить пустым, хук сработает всего один раз, как Вам и требуется в задании).

Предлагаю пример кода ниже:
С помощью fetch делаем get запрос за данными, сервер вернет данные и после мы из них получаем json с помощью соответствуюего метода и затем выводим в консоль

import React, { useEffect } from 'react';

const Page = () => {
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json => console.log(json))
  }, []);

export default Page;

Варианта два:

1. Там, где статистика есть "Contribution settings" и стандартно активна опция только Activity Overview, можете включить Private Contributions, если коммитите в приватный репозиторий чей-то

2. Если вы создали свой репозиторий, например, приватный, создали ветку (не мастер) и запушили такую ветку - пока вы не смержите с мастером свою ветку в статистике не увидите
Написано только что

Для решения задачи важно, чтобы код был читабельным и понятным.

const arr = [1, 2, 3, 2, 3, 4];

const replaceTheSameElementsToX = array => {
    const result = [];
    let coincidence = 0;

    for(let i = 0; i < array.length; i++) {
        array.map(el => el === array[i] ? coincidence++ : coincidence);

        if (coincidence === 1) {
            result.push(array[i]);
        } else if (coincidence > 1) {
            result.push('x');
        }
        coincidence = 0;
    }
    return result; 
}

replaceTheSameElementsToX(arr); // [1, "x", "x", "x", "x", 4]

или тоже самое с помощью методов массива:

const arr = [1,2,3,2,3,4];

const findTheSameNumbers2 = array => array.map((elementOfBaseArray,i,baseArray) => baseArray.reduce((coincidence, currentValue, index, elementAsArray) => elementOfBaseArray === elementAsArray[index] ? coincidence + 1 : coincidence, 0) === 1 ? elementOfBaseArray : 'x');

findTheSameNumbers2(arr); // [1, "x", "x", "x", "x", 4]