---
title: "Reinventing hooks and maintaining state server-side"
publication: "React Status"
issue: 185
published_at: "2020-04-22"
canonical_url: "https://react.statuscode.com/issues/185"
---

This week's React news, links, and libraries       

#185 — April 22, 2020 

[Read on the Web](https://react.statuscode.com/issues/185)   React Status Your weekly React news digest, every Wednesday  

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/wvp8ku7u9enljcdczcri.jpg)](https://github.com/maxchehab/phelia)   

[Phelia: A Reactive Slack Application Framework](https://github.com/maxchehab/phelia) — If you think Slack apps were all about text bots, think again.. you can now create apps [complete with in-app UIs.](https://api.slack.com/surfaces) Phelia brings the React approach to the task. 

Max Chehab   

[Restoring React Reducer State Across Browser Sessions](https://www.executeprogram.com/blog/restoring-react-reducer-state-across-browser-sessions) — An online learning platform used [io-ts](https://github.com/gcanti/io-ts) to store `useReducer` state _server-side_ in order to resume things at a later session. An interesting approach and walkthrough of the other possible solutions even if you don’t need to do this yourself. 

Execute Program   [![\](https://copm.s3.amazonaws.com/5ea93462.jpg)](https://frontendmasters.com/courses/hardcore-js-v2/?utm_source=reactweekly&utm_medium=email&utm_campaign=javascriptv2) 

[Learn Hardcore Functional Programming in JavaScript](https://frontendmasters.com/courses/hardcore-js-v2/?utm_source=reactweekly&utm_medium=email&utm_campaign=javascriptv2) — Join Brian Lonsdorf and learn how to apply such concepts as pure functions, currying, composition, functors, monads and more. 

Frontend Masters sponsor   

[Reinventing Hooks with React Easy State](https://blog.risingstack.com/reinventing-hooks-with-react-easy-state/) — You know it’s going to be interesting when an article starts: _“This article defies a lot of trending patterns, like: React hooks…”_ This really pushes the [React Easy State](https://github.com/RisingStack/react-easy-state) case hard. 

Bertalan Miklos   

[React Refresh Support Coming in Next _Create React App_](https://github.com/facebook/create-react-app/pull/8582) — Fast Refresh seems likely to usurp React Hot Loader’s crown at some point this year so it’s good to see this work taking place. If you’re interested in the _difference_, [this SO question will help](https://stackoverflow.com/questions/59085281/difference-between-hot-reload-and-fast-refresh-in-react-native).. or if you want to play with Fast Refresh in CRA _now_, [here’s a brief tutorial.](https://dutzi.party/react-fast-refresh/) 

Facebook   

[ZEIT Is Now Vercel](https://vercel.com/blog/zeit-is-now-vercel) — You probably best know ZEIT as the creators and maintainers of the popular [Next.js](https://nextjs.org/) React framework. 

Vercel  

💻 Jobs  

[React Developer at X-Team (Remote)](https://x-team.com/remote-react-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=react) — Join the most energizing community for developers. Work from anywhere with the world's leading brands. 

X-Team   

[Find a Job Through Vettery](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-reactstatus&utm_term=tech&utm_content=grouped&utm_campaign=ad-77585) — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started. 

Vettery  

📘 Tutorials and Stories  

[Inside a Dev's Mind: How To Plan Out a UI Feature](https://jkettmann.com/how-do-you-plan-a-ui-feature/) — A look at how to approach building a new frontend feature in a thoughtful, considered way, based on one developer’s own thought process. It’s neat to see how he’d approach the task of building a basic heatmap. 

Johannes Kettmann   

▶[React: The Basics in 20 Minutes](https://www.youtube.com/watch?v=FNnhEBDYBr8) — A well presented, up to date (yep, it covers hooks) tutorial that doesn’t hang around, whether you’re new to React or just want a refresher. 

Devistry   

[The Quest for the Perfect Dark Mode](https://joshwcomeau.com/gatsby/dark-mode/) — _”learn how to build the perfect Dark Mode for Gatsby.js. The fundamental strategy can also be used with Next.js or any SSR app.”_ 

josh w comeau   

[Building Chat With React? Stream Chat Has You Covered](https://getstream.io/chat/react-chat/tutorial/?utm_campaign=react_status&utm_medium=promoted_newsletter&utm_source=react_status_promoted) — Have a look at our interactive chat tutorial in React and learn how to build with Stream Chat. 

Stream sponsor   

▶[How to Bring an Icon from Adobe Illustrator into React](https://www.youtube.com/watch?v=HV8fApg25Ok) — A quick five minute screencast where SVG is the key. 

Andrew Richards   

[React Performance Optimization with `React.memo()`](https://felixgerschau.com/react-performance-react-memo) 

Felix Gerschau   

▶[Building Static Sites with Next.js 9.3 and Prisma](https://www.youtube.com/watch?v=wk-dUsLUADg) 

Lee Robinson  

🔧 Code and Tools 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1f8wikkcvhulc0e9jkg.jpg)](https://github.com/Significa/react-snuggle)   

[Snuggle: A 'Comfortable' Way to Layout Your Components](https://github.com/Significa/react-snuggle) — A way to create CSS-based ‘masonry’ style layouts of components. [Live demos here](https://significa.github.io/react-snuggle/?selectedKind=Snuggle&selectedStory=default&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Fstories%2Fstories-panel). 

Significa   

[Vidact: A Compiler to Convert React-like Apps to Vanilla JS](https://mohebifar.github.io/vidact/) — Compiles pure React-compatible JavaScript (JSX) to vanilla JavaScript with no virtual DOM.. think similar to Svelte, but without introducing a new syntax. A curious idea. 

Mohamad Mohebifar   

[React Page Visibility 6.x: A Declarative, Isomorphic 'Page Visibility' HOC](https://github.com/pgilad/react-page-visibility) — React to your app being in the background (or invisible) so you can do things like conserve bandwidth or stop running animations, etc. 

Gilad Peleg   

[react-notion: A Fast React Renderer for Notion Pages](https://github.com/splitbee/react-notion) — For when you might want to use [Notion](https://www.notion.so/) as a sort of CMS for your blog, documentation or personal site (though you have to do a little extra work to actually work with Notion’s API). 

Splitbee   

[Faster CI/CD for All Your Software Projects Using Buildkite](https://buildkite.com/?pk_campaign=reactstatus-220420&pk_source=cp-reactstatus&pk_medium=newsletter) 

Buildkite sponsor   

[Codelift: A No Code GUI for Your React App](https://github.com/ericclemmons/codelift) — Details on how this works [in this Tweet](https://twitter.com/ericclemmons/status/1205161643300098048). Useful for apps already built and includes a Tailwind CSS visual inspector. 

Eric Clemmons   

[react-svg-map: Components to Display Interactive SVG Maps](https://github.com/VictorCazanave/react-svg-map) 

Victor Cazanave         

A **[Cooperpress](https://cooperpress.com/)** publication. 

[Change your email address](https://react.statuscode.com/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://react.statuscode.com/leave/*|UID|*) 

© Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom