React_State_Communication_Component.pptx

Just an upload

1. React State Communication Patterns

2. Parent → Child Props flow down from parent to child. Example: function Child({ message }) { return <h2>{message}</h2>; } function Parent() { return <Child message='Hello from Parent!' />; }

3. Child → Parent Callbacks lift data back up. Example: function Child({ sendData }) { return <button onClick={() => sendData('Hi Parent!')}>Send</button>; } function Parent() { const [data, setData] = useState(''); return <Child sendData={setData} />; }

4. Sibling ↔ Sibling Siblings communicate via lifted state in their parent. Example: function Parent() { const [shared, setShared] = useState(''); return <> <SiblingA setShared={setShared} /> <SiblingB shared={shared} /> </>; }

5. Cross-Tree (Context API) Avoid prop drilling with Context. Example: const UserContext = createContext(); <UserContext.Provider value='Euge'> <Child /> </UserContext.Provider> function GrandChild() { const user = useContext(UserContext); return <h2>{user}</h2>; }

6. Global State Use Redux, Zustand, or Recoil for app-wide state. Example (Redux): const counterSlice = createSlice({ name: 'counter', ... }); const count = useSelector(state => state.counter.value); const dispatch = useDispatch(); dispatch(increment());

7. Custom Hooks Reusable state sharing logic across components. Example: function useSharedState() { const [value, setValue] = useState(''); return { value, setValue }; } // Components use shared.value and shared.setValue

8. Cross-Tab Communication Use localStorage or BroadcastChannel API to sync state across tabs. Example: const bc = new BroadcastChannel('channel'); bc.postMessage('Hello!'); bc.onmessage = (e) => console.log(e.data);