كيفية عمل state لتطبيق الريأكت كاملًا يمكن الوصول إليها من خلال أي component

يمكنك إستخدام حلول أخرى غير الuseState حتى تؤدي لك الغرض, من ضمن تلك الحلول هي إستخدام Context api وهي عبارة عن طريقة لعمل state للتطبيق ككل وتوزيعه بين الcomponents , وذلك المثال بالأسفل من التوثيق الرسمي لReact 

import { createContext, useContext } from 'react';

const ThemeContext = createContext(null);

export default function MyApp() {
  return (
    <ThemeContext.Provider value="dark">
      <Form />
    </ThemeContext.Provider>
  )
}

function Form() {
  return (
    <Panel title="Welcome">
      <Button>Sign up</Button>
      <Button>Log in</Button>
    </Panel>
  );
}

function Panel({ title, children }) {
  const theme = useContext(ThemeContext);
  const className = 'panel-' + theme;
  return (
    <section className={className}>
      <h1>{title}</h1>
      {children}
    </section>
  )
}

function Button({ children }) {
  const theme = useContext(ThemeContext);
  const className = 'button-' + theme;
  return (
    <button className={className}>
      {children}
    </button>
  );
}

كما تلاحظ في المثال هنا قد قام بتعريف الكونتيكست theme وقام بتمريرالقيمة  dark ومن ثم قام بإستخدام تلك القيمة في component مختلفة تمامًا وهي الcomponent التي تُدعى Button وقام بإستخدام تلك القيمة عبر إستخدام الدالة useContext , ويمكنك قراءة المزيد عبر قراءة التوثيق الرسمي لreact من خلال الرابط هذا  أو عبر التوثيق المُقدم من خلال موسوعة حسوب عبر الرابط هذا

هناك حلول أخرى كثيره تتمثل في المكتبات مثل 

• Recoil 
• Jotai 
• Redux
•  Rematch

وغيرهم الكثير ولكن مع نمو تطبيقات React من حيث الحجم والتعقيد ، فإن إدارةال global state  تمثل تحديًا. 

لذلك عندما يصبح حجم التطبيق كبيراً فلن يجدي ال Context api نفعاً حيث أنه يستخدم في التطبيقات الصغيره عندما لا تريد استدعاء أي مكتبات خارجية لذلك لا يمكنك الإعتماد عليه 

يعتبر Redux من أشهر المكتبات من زمن لذلك يمكنك استخدامها ولكن يفضل الإطلاع على المكتبات الأخرى حيث أن حديثه فتقوم بتقديم حلول أسهل من redux

قم بقراءة هذه الإجابات لمعرفة متى تستخدم ال  Context api و مكتبات ال state management 

هناك أكثر من طريقة أحدها أن تبني التطبيق الخاص بك بحيث تكون الstate الرئيسية موجودة على ال component الرئيسي الحاوي لجميع الcomponents الفرعية أي البناء بشكل هرمي وتعرف في component الرئيسي دالة تعديل الstate والتي تمرره بمعية الstate الى كل component فرعي. المثال التالي يوضح الفكرة بشكل أفضل

...
const SubComponentOne = (props)=> { // مكون فرعي
  const [state, setState]= useState(props.mainState)
  const changeName(event)=>{ // عند تغيير النص في صندوق الإدخال سيتم التغيير على حالة التخزين الرئيسية التي ستعكس التغيير على كافة الفروع
     const name= event.target.value
     props.setState({name}) // هنا يتم التغيير على حالة المكون الرئيسي
     
  }
  return(
    <div> 
      <span>{state.name}</span>
      <input onChange={changeName} defaultValue={''} />  
    </div>
  )
}
const App = ()=> { // مكون رئيسي
  const [mainState, setState]= useState({name:"Main"})
  return(
    <>
    <SubComponentOne setState={setState} mainState={mainState}/> // مكون فرعي
    <SubComponentTwo setState={setState} mainState={mainState}/> // مكون فرعي أخر
    </>
   )
}
...