MarEeeeee

Тут надо определиться, что тебе надо конкретно. Если тебе на разных размерах окна браузера нужны конкретное количество колонок, то гриды тебе тут не помогут, используй @media запросы и выставляй нужное число колонок grid-template-columns: 1fr 1fr 1fr. Если тебе не важно сколько будет колонок, а важно чтоб сами колонки не были меньше заданного размера, то вот тут тебе и надо использовать repeat(auto-fit, minmax(500px, 1fr))

Вот полная версия требуемого компонента с индикатором загрузки и обработкой ошибки:

class Lectures extends React.PureComponent {

    state = {
        lectures: null,
        lecturesError: null,
        lecturesPending: true,
    }

    async componentDidMount() {
        await this.fetchLectures()
    }

    async fetchLectures() {
        this.setState({ lectures:null, lecturesError:null, lecturesPending:true })
        try {
            const lectures = (await firebase.database().ref('lectures').once('value')).val()
            console.log(lectures)
            this.setState({ lectures, lecturesError:null, lecturesPending:false })
        } catch (lecturesError) {
            console.error(lecturesError)
            this.setState({ lectures:null, lecturesError, lecturesPending:false })
        }
    }

    render() {
        const { lectures, lecturesError, lecturesPending } = this.state
        return (
            <section>
                <h1>Лекции</h1>
                {lecturesPending && (
                    <div>Загружаются...</div>
                )}
                {lecturesError != null && (
                    <div>Не удалось загрузить: {lecturesError.message}</div>
                )}
                {lectures != null && (
                    <ul>
                        {lectures.map((lecture) => (
                            <li
                                key={lecture.id}
                            >
                                {lecture.name}
                            </li>
                        ))}
                    </ul>
                )}
            </section>
        )
    }
}

Встречный вопрос: как нужные вам данные попали туда, откуда вы собираетесь их "получать"? Ничего делать не надо, всё уже есть - работайте внутри handleClick с объектом item.

Вы думали написали слово async и оно само внезапно стало асинхронным? Ничего подобного. У вас всё разлетается на кучу параллельно исполняемых функций, и никто никого не ждёт. Изучайте асинхронность в javascript или используйте синхронные функции(с постфиксом Sync).

Спрятать не выйдет, а вот затруднить немного чтение вполне. Например с помощью обфускации. Но будьте готовы к увеличению объёма кода.
Например console.log('Лол, кек, чебурек'); превратиться в

var _0xac52=["\u041B\u043E\u043B\x2C\x20\u043A\u0435\u043A\x2C\x20\u0447\u0435\u0431\u0443\u0440\u0435\u043A","\x6C\x6F\x67"];console[_0xac52[1]](_0xac52[0])

. Оно вам надо? ИМХО всё это детский сад.

И снова супер секретные наработки защитить пытаются =)
Нет, нельзя защитить. Чтобы отобразить сайт, браузер должен выкачать все нужные файлы. А соответственно когда сайт загрузился, то файлы уже на компе пользователя.