{"id":604,"date":"2020-11-23T19:26:59","date_gmt":"2020-11-23T19:26:59","guid":{"rendered":"https:\/\/jmrowe.com\/blog\/?p=604"},"modified":"2021-01-02T13:28:05","modified_gmt":"2021-01-02T13:28:05","slug":"reactjs-using-recoil-js-for-state-management-notes","status":"publish","type":"post","link":"https:\/\/jmrowe.com\/blog\/reactjs-using-recoil-js-for-state-management-notes\/","title":{"rendered":"Reactjs using recoil.js for state management notes"},"content":{"rendered":"<p>Recoil.js is being designed by facebook apparently to replace redux so I figured I&#8217;d take a look.<\/p>\n<p>My sample Codesandbox<\/p>\n<p><iframe style=\"width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;\" src=\"https:\/\/codesandbox.io\/embed\/reactjs-recoil-sandbox-foef4?fontsize=14&amp;hidenavigation=1&amp;theme=dark\" title=\"Reactjs Recoil Sandbox\" allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\" sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"><\/iframe><\/p>\n<p><strong>Atoms\u00a0<\/strong> &#8211; most basic for of state that can be shared amongst components and or selectors. It requires a &#8220;key&#8221; which must be unique and to initialize with a value(s) use default.<\/p>\n<pre class=\"lang:default decode:true\">const marginTopState= atom({\r\n  key: 'marginTopState',\r\n  default: 10,\r\n});<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>useRecoilState <\/strong>&#8211; Used to read and <strong>write<\/strong> an atom from a component.<\/p>\n<p><strong>Selectors\u00a0<\/strong>&#8211; a pure function that will basically just return a computed value based on atom(s) and\/or other selectors. By default, selectors are not writable and so can not alter the atoms\/selections within it; only use it to provide its produced computed value. (get)<\/p>\n<pre class=\"lang:default decode:true \">const marginTopComputedState = selector({\r\n  key: 'marginTopComputedState',\r\n  get: ({get}) =&gt; {\r\n    const marginTopValue = get(marginTopState);\r\n    const unit = 'px';\r\n    \/\/ would use template literals here but my code highlighting \r\n    \/\/ plugin I used for the site breaks :(\r\n    return marginTopValue+unit; \r\n  },\r\n});<\/pre>\n<p><strong>useRecoilValue<\/strong> &#8211; used to get\/use the computed value from a selector.<\/p>\n<pre class=\"lang:default decode:true \">const computedMarginTopLabel = useRecoilValue(marginTopComputedState);<\/pre>\n<p><strong>Creating &#8220;n&#8221; amount of atoms<\/strong><\/p>\n<p>Sometimes we need an unknown amount of state atoms in an app. One way is to create a function that will returned a memorized atom based on an ID. We memorize it that way if it is the same ID we use the already made atom and return that instead of regenerating the atom.<\/p>\n<p>For example:<\/p>\n<pre class=\"lang:default decode:true \">export const itemWithID = \r\n  memoize(id =&gt; atom({\r\n     key: \"item\"+id,   \/\/ done this way because tilde strings breaks my code highlighting plugin :(\r\n     default: \"\"\r\n}))<\/pre>\n<p>Then we can use it in components like below:<\/p>\n<pre class=\"lang:default decode:true \">function SomeComponent({id}){\r\n  const [itemState, setItemState] = useRecoilState(itemWithID(id));\r\n  return ...\r\n}<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Recoil.js is being designed by facebook apparently to replace redux so I figured I&#8217;d take a look. My sample Codesandbox Atoms\u00a0 &#8211; most basic for of state that can be shared amongst components and or selectors. It requires a &#8220;key&#8221; which must be unique and to initialize with a value(s) use default. const marginTopState= atom({ [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,12,17],"tags":[],"class_list":["post-604","post","type-post","status-publish","format-standard","hentry","category-development","category-javascript","category-reactjs"],"_links":{"self":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts\/604","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/comments?post=604"}],"version-history":[{"count":19,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts\/604\/revisions"}],"predecessor-version":[{"id":650,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts\/604\/revisions\/650"}],"wp:attachment":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/media?parent=604"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/categories?post=604"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/tags?post=604"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}