<{myModel.myProp}/div>;\n};\n```\n\n## Recipes\n\n### Creating simple model\n\n```js\nimport { create } from \"remos\";\n// create a model with specified props\n// the created model has binded properties\n// when binded property changed, the change listeners will be called\nconst counter = create({ count: 1 });\n// register change listener\ncounter.$listen(() => console.log(\"changed\"));\ncounter.count++; // update count prop\n```\n\n### Connecting model to React component\n\n```js\nimport { create, useModel } from \"remos\";\n\nconst counter = create({ count: 1 });\n\nconst App = () => {\n // bind the model to the component\n // when model is changed, the component re-renders\n useModel(counter);\n return
{counter.count}
;\n};\n```\n\n### Selecting single model prop\n\nIt detects changes with strict-equality (old === new) by default.\n\n```js\nimport { create, useModel } from \"remos\";\nconst counter = create({ count: 1, other: 2 });\nconst App = () => {\n // select only count prop value\n // that means the component will re-render when count prop change only\n // nothing happens if other prop is changed\n const count = useModel(counter, (props) => props.count);\n return
{count}
;\n};\n```\n\n### Selecing multiple model props\n\nFor more control over re-rendering, you may provide an alternative equality function on the thrid argument.\n\n```js\nimport { create, useModel } from \"remos\";\nconst user = create({ firstName: \"\", lastName: \"\", age: 50 });\nconst App = () => {\n const result = useModel(\n user,\n (props) => (\n {\n firstName: props.firstName,\n lastName: props.lastName,\n },\n // use shallow compare or pass custom equality function here\n \"shallow\"\n )\n );\n\n return (\n
\n {result.firstName} {result.lastName}\n
\n );\n};\n```\n\n### Handling multiple model updates\n\n```js\nconst model1 = create({});\nconst model2 = create({});\nconst model3 = create({});\n\nconst App = () => {\n // the component will be re-rendered whenever model1, model2, model3 are updated\n useModel([model1, model2, model3]);\n return <>;\n};\n```\n\n### Selecting props from multiple models\n\n```js\nconst author = create({ name: \"Bill\" });\nconst article = create({ title: \"React basis\" });\nconst App = () => {\n const result = useModel(\n { author, article },\n (props) =>\n `The article ${props.article.title} is written by ${props.author.name}`\n );\n const { authorName, articleTitle } = useModel(\n { author, article },\n (props) => ({\n authorName: props.author.name,\n articleTitle: props.article.title,\n }),\n \"shallow\" // using shallow compare if the selector returns complex object\n );\n return
{result}
;\n};\n```\n\n## Demos\n\n1. [Counter App](https://codesandbox.io/s/solitary-cherry-5th8g7)\n2. [Todo App](https://codesandbox.io/s/remos-todo-qlqmne)\n3. [Using React Suspense](https://codesandbox.io/s/remos-suspense-nxj8cc)\n4. [Family Model](https://codesandbox.io/s/remos-family-b0yfnu)\n5. [Local Model](https://codesandbox.io/s/local-model-fnso1b)\n6. [Hacker News](https://codesandbox.io/s/remos-hacker-news-3m6t29)\n7. [Search Box](https://codesandbox.io/s/remos-search-box-e8lz3p)\n8. [Performance Test](https://codesandbox.io/s/remos-performance-9plx2i)\n\n## Addons\n\n1. [remos-immer](https://www.npmjs.com/package/remos-immer)\n\n## API References\n\nhttps://linq2js.github.io/remos/\n","readmeFilename":"README.md","keywords":["redux","oop","model","state","state management","react"]}