вызов функции обратного вызова для родителя (callbacks)

different files.jsx

Content.jsx (родительская компонента):

import './Content.css';
import {useContext, useState} from 'react';
import {AppContext} from '../../contexts/AppContext.jsx';
import {MyButton} from '../mybutton/MyButton.jsx';

export function Content() {
    const {theme, user} = useContext(AppContext);
    // состояние для хранения количества кликов
    const [count, setCount] = useState(0);

    // !!! функция-обратный вызов для обработки клика от дочернего компонента !!!
    const handleButtonClick = () => {
        setCount((prev) => prev + 1);
    };

    // !!! родитель передаёт handleButtonClick дочернему компоненту MyButton через prop onButtonClick !!!
    return (
        <main className="content">
            <h2 className="content-title" style={{color: theme.color}}>
                Добро пожаловать в игру, {user.name}!
            </h2>
            <p>Общее количество кликов: {count}</p>
            <MyButton onButtonClick={handleButtonClick}/>
        </main>
    );
}

=====================================================================================================================

MyButton.jsx (дочерняя компонента):

import './MyButton.css';
import {useContext, useState} from 'react';
import {AppContext} from '../../contexts/AppContext.jsx';

export function MyButton({onButtonClick}) {
    const [localCount, setLocalCount] = useState(0);
    const {theme, toggleTheme} = useContext(AppContext);

    // обработчик клика
    const handleClick = () => {
        setLocalCount((prev) => prev + 1); // локальный счётчик
        toggleTheme();
        onButtonClick(); // !!! вызов функции-обратного вызова для родителя !!!
    };

    return (
        <button
            className="my-button"
            onClick={handleClick}
            style={{
                backgroundColor: theme.background,
                color: theme.color,
            }}
        >
            Нажми меня (Локальных кликов: {localCount})
        </button>
    );
}

=====================================================================================================================
    
про мемоизацию функций (предотвращение их пересоздания при каждом рендере, и ненужных ререндеров дочерних компонентов,
использующих эти функции через props: https://react.dev/reference/react/useCallback
                        
=====================================================================================================================
                        
В React состояние родительского компонента хранится в самом родителе, и дочерний компонент не может напрямую его модифицировать.
Вместо этого:
- Родитель передает функцию-обратный вызов через props дочернему компоненту
- Дочерний компонент вызывает эту функцию при определенном событии (например, клик, ввод текста) и может передать данные
- Функция в родителе обновляет его состояние, что приводит к ререндеру родителя и, при необходимости, дочернего компонента !!!

Этот подход называется ПОДЪЁМ СОСТОЯНИЯ (lifting state up), и он обеспечивает:
- Предсказуемость: Состояние управляется в одном месте
- Синхронизацию: Изменения состояния родителя автоматически отражаются во всех дочерних компонентах, зависящих от этого состояния
- Однонаправленный поток данных: Данные текут сверху вниз (через props), а события — снизу вверх (через callbacks)