![](\"https://raw.githubusercontent.com/crimx/value-enhancer/main/assets/value-enhancer.svg\")
\n\n \n
{value}
;\n}\n```\n\n### useDerived\n\n`useDerived` accepts a val from anywhere and returns the latest derived value.\n\nRe-rendering is triggered when the derived value changes.\n\n```tsx\nimport { val } from \"value-enhancer\";\nimport { useDerived } from \"use-value-enhancer\";\n\nconst val$ = val(\"1\");\n\nfunction Component({ val$ }) {\n const derived = useDerived(val$, value => Number(value));\n return{derived}
;\n}\n```\n\n### useFlatten\n\n`useFlatten` accepts a val from anywhere and returns the latest value from the flatten val.\n\nRe-rendering is triggered when the flatten value changes.\n\n```tsx\nimport { val } from \"value-enhancer\";\nimport { useFlatten } from \"use-value-enhancer\";\n\nconst val$ = val(val(\"1\"));\n\nfunction Component({ val$ }) {\n const value = useFlatten(val$); // \"1\"\n return{value}
;\n}\n```\n\n```tsx\nimport { val } from \"value-enhancer\";\nimport { reactiveMap } from \"value-enhancer/collections\";\nimport { useFlatten } from \"use-value-enhancer\";\n\nconst map = reactiveMap();\nmap.set(\"a\", val(\"1\"));\n\nfunction Component({ map }) {\n const value = useFlatten(map.$, map => map.get(\"a\")); // \"1\"\n return{value}
;\n}\n```\n\n### useKeys\n\n`useKeys` accepts a reactive collection and returns the latest `keys()` as array.\n\n```tsx\nimport { reactiveMap } from \"value-enhancer/collections\";\nimport { useKeys } from \"use-value-enhancer\";\n\nconst map = reactiveMap();\n\nfunction Component({ map }) {\n const keys = useKeys(map);\n return keys.map(key =>{key}
);\n}\n```\n\n### useValues\n\n`useValues` accepts a reactive collection and returns the latest `values()` as array.\n\n```tsx\nimport { reactiveSet } from \"value-enhancer/collections\";\nimport { useValues } from \"use-value-enhancer\";\n\nconst set = reactiveSet();\n\nfunction Component({ set }) {\n const values = useValues(set);\n return values.map(value =>{value}
);\n}\n```\n\n### Example\n\n```jsx\nimport React, { createContext, useContext } from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport { val } from \"value-enhancer\";\nimport { useVal } from \"use-value-enhancer\";\n\nconst valFromProps$ = val(\"Props\");\nconst valFromContext$ = val(\"Context\");\nconst valFromExternal = val(\"External\");\n\nconst ValContext = createContext(valFromContext$);\n\nexport const App = ({ valFromProps$ }) => {\n const valFromProps = useVal(valFromProps$);\n\n const valFromContext$ = useContext(ValContext);\n const valFromContext = useVal(valFromContext$);\n\n const valFromExternal = useVal(valFromExternal$);\n\n return (\n <>\n\n {valFromProps}, {valFromContext}, {valFromExternal}\n
\nProps, Context, External
\n \n );\n};\n\nReactDOM.createRoot(document.getElementById(\"root\")).render(\n