window.ENTITIES={'/api/snippets/jsx/react%20-%20create%20shared%20state%20across%20multiple%20components%20(using%20custom%20solution)':[{"result":true,"message":null,"batch":{"type":"jsx","name":"react - create shared state across multiple components (using custom solution)","items":[{"id":"1AK20p","type":"jsx","name":"React - create shared state across multiple components (using custom solution)","content":"// ONLINE-RUNNER:browser;\n\nimport React, {createContext, useContext, useState, useMemo, useEffect} from 'react';\n\nconst createSharedState = (value) => {\n let _value = value;\n const _listeners = new Array();\n return {\n setValue: (value) => {\n for (const listener of _listeners) {\n listener(value);\n }\n },\n getValue: () => {\n return _value;\n },\n useValue: () => {\n const [counter, setCounter] = useState(0);\n useEffect(\n () => {\n const listener = (value) => {\n _value = value;\n setCounter(counter => counter + 1);\n };\n _listeners.push(listener);\n return () => {\n var index = _listeners.indexOf(listener);\n if (index !== -1) {\n _listeners.splice(index, 1);\n }\n };\n },\n []\n )\n return _value;\n }\n };\n};\n\nconst useSharedState = (value) => {\n return useMemo(\n () => createSharedState(value),\n [value]\n );\n};\n\n\n\n// Usage example:\n\nconst SharedState = createContext();\n\nconst Component1 = () => {\n const sharedState = useContext(SharedState);\n return (\n \n \n \n \n
\n );\n};\n\nconst Component2 = () => {\n const sharedState = useContext(SharedState);\n const sharedValue = sharedState.useValue();\n return (\n \n Shared value: {sharedValue}\n
\n );\n};\n\nconst App = () => {\n const sharedState = useSharedState('default'); // replace 'default' with your default value\n return (\n \n \n \n \n \n \n \n
\n );\n};\n\nexport default App;","source":"https://dirask.com/posts/React-create-shared-state-across-multiple-components-pJZggp","author":{"id":"Ro42dD","name":"Creg","avatar":"1667335677213__Ro42dD__w40px_h40px.jpg","points":9600,"role":"ADMIN"},"creationTime":1728006226000,"updateTime":1728032419000,"removalTime":null}]}}]};