--- title: "A visual guide to useEffect" publication: "React Status" issue: 271 published_at: "2022-01-12" canonical_url: "https://react.statuscode.com/issues/271" --- Plus a look back at what happened at React Conf 2021. | #​271 — January 12, 2022 [Read on the Web](https://react.statuscode.com/issues/271) 🗓 We're back and ready for another fantastic year for React (though we're going to take a quick look back at React Conf 2021 first). React 18 is only just around the corner, too – exciting times! __ _Peter Cooper and Terence Gannon — your editors_ React Status ⚛️ Your weekly React news digest, _every Wednesday_. [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/chkepxfwyol46ieebmis.jpg)](https://reactjs.org/blog/2021/12/17/react-conf-2021-recap.html) ▶[A Recap of React Conf 2021](https://reactjs.org/blog/2021/12/17/react-conf-2021-recap.html) — React Conf took place online for the first time in 2021 and this is a fantastic summary of what took place along with videos of the talks and why you might watch some of them. The [main keynote](https://www.youtube.com/watch?v=FZ0cG47msEk) covered the state of concurrency, Suspense, server components, React Native, and more. Jesslyn Tannady and Rick Hanlon [A Visual Guide to `useEffect`](https://alexsidorenko.com/blog/useeffect/) — We have featured previous instalments of the author’s _Visual Guide to React Rendering_ series (see `[useMemo](https://alexsidorenko.com/blog/react-render-usememo/)` and `[Props](https://alexsidorenko.com/blog/react-render-props/)` for example) and now he turns his attention to `useEffect`. His illustration of these concepts through a series of GIFs is both clever and effective, particularly for visual learners. There's also [a visualization of how first class functions work](https://alexsidorenko.com/blog/react-javascript-first-class-functions/) if you want more. Alex Sidorenko [![\](https://copm.s3.amazonaws.com/c195ee88.jpg)](https://frontendmasters.com/courses/xstate-v2/?utm_source=reactstatus&utm_medium=email&utm_content=xstate) [New Course on State Machines with XState by David Khourshid](https://frontendmasters.com/courses/xstate-v2/?utm_source=reactstatus&utm_medium=email&utm_content=xstate) — If you build large JavaScript apps and want to stop running into weird edge cases, you'll want to learn state machines. Spend your time modeling app logic clearly and robustly. Frontend Masters sponsor [Relay 13 Released: A Framework for Building Data-Driven React Apps](https://github.com/facebook/relay/releases/tag/v13.0.0) — A way to avoid using imperative APIs for fetching data in React apps. Instead, you define your data requirements using GraphQL and Relay does the rest. The [new Relay compiler](https://relay.dev/blog/2021/12/08/introducing-the-new-relay-compiler/) is a big part of this release. Facebook [On React Project Layout](https://blog.testdouble.com/posts/2021-11-30-tdr-project-layout/) — The author makes the case that the layout of the `src` directory should be more standardized, similar to the approach taken by the highly opinionated _Ruby on Rails_. Here is his proposal for making this directory something other than the ‘wild west’. Tommy Groshong Jobs [React Developer at X-Team (Remote)](https://x-team.com/remote-react-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=cooperpress-react&utm_content=react) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team [Senior Full Stack Engineer (Remote)](https://grnh.se/5505867f2us) — Invoca is looking for passionate developers to join our team. Help build something awesome with React, GraphQL and Ruby on Rails. Invoca [Find React Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-reactstatus%29&utm_content=find-your-next-job) — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers. Hired [How to Connect a React App to a Notion Database](https://dev.to/alexeagleson/how-to-connect-a-react-app-to-a-notion-database-51mc) — A well written and easy to follow explanation. Alex Eagleson [Real-Time React Apps Using Watchables](https://www.shortwave.com/blog/watchables-realtime-react-without-redux/) — The impetus for [Shortwave](https://www.shortwave.com)’s creation of their open source _[watchable](https://github.com/shortwave/watchable)_ library was to address a small yet intractable requirement: for their app’s users to see updates to their email inbox without the need for a refresh. This article describes its use as well as potential application outside the original domain. Tyler Rockwood (Shortwave) [The Only Two Custom React Hooks We Ever Really Use](https://blog.molecule.dev/the-only-custom-react-hooks-we-use/) Luke Hager [How To Prevent Unnecessary React State Update Re-Renders](https://www.chakshunyu.com/blog/how-to-prevent-unnecessary-react-state-update-re-renders/) Chak Shun Yu [Rethinking Modals Management in React](https://t.co/Q0NrAk19qa) Nate Wang and Feng Xie (eBay) [Computed Properties in React vs. Vue](https://t.co/I8JmIqw1wk) Jeremiah Shore 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/zhxndq6iavr0dehtxv4y.jpg)](https://jpb12.github.io/react-tree-graph) [react-tree-graph: Render SVG Trees](https://jpb12.github.io/react-tree-graph) — A tree rendering component now in its seventh major release. Check out the [demo](https://jpb12.github.io/tree-viewer/) as well as additional [examples](https://jpb12.github.io/react-tree-graph/). James Brierley [React-Grid-Layout](https://github.com/react-grid-layout/react-grid-layout) — A draggable grid component similar to [Packery](https://packery.metafizzy.co) or [Gridster](https://dsmorse.github.io/gridster.js/). The [showcase demo](https://react-grid-layout.github.io/react-grid-layout/examples/0-showcase.html) as well as a series of [focused demos](https://github.com/react-grid-layout/react-grid-layout#demos) illustrate its considerable capabilities. RGL [Data Visualization Made Easy with ReactJS, Nivo, and InfluxDB](https://www.influxdata.com/blog/data-visualization-reactjs-nivo-influxdb/?utm_source=vendor&utm_medium=referral&utm_campaign=2022-01-12_spnsr-nl_visualization-nivo-influxdb_global&utm_content=reactstatus) InfluxData sponsor [Elf: 'Magical' Reactive State Management?](https://github.com/ngneat/elf) — Another entrant in the busy React state management space, this one claiming to have ‘[magical powers](https://ngneat.github.io/elf/)’?! (And a cute logo, to be fair.) The [interactive demo](https://stackblitz.com/edit/react-ts-jidhej?file=todos/todos.tsx) on [StackBlitz](https://stackblitz.com) might help you decide if that’s actually the case. Netanel Basal [ActiveMDX: More Easily Re-Use and Re-Purpose Documentation](https://active-mdx.soederpop.com/) — For any domain—such as software development—which depends on accurate and up-to-date technical documentation, a classic pain point is keeping the various re-used chunks of content up-to-date. Based on [MDX](https://mdxjs.com), this library offers the promise of keeping these documents in sync as the source document content evolves. Jonathan Soeder [Markdown Editor 3.9: A Simple, React-Powered Markdown Editor with Preview](https://github.com/uiwjs/react-md-editor) uiw [Rendition: Figma to React in One Click?](https://www.figma.com/community/plugin/1031998871372194709/Rendition%3A-Figma-%3EReact-in-one-click) Caleb Ouellette and Robert Nowell [use-cannon 4.5: Physics Based Hooks for react-three-fiber](https://github.com/pmndrs/use-cannon) Poimandres ## ⚡️ Quick Bits: - [Reacord](https://reacord.fly.dev/) — Create interactive Discord messages using React and the Discord API. - [react-grid-heatmap](https://github.com/arunghosh/react-grid-heatmap) — The popular [heat map](https://en.wikipedia.org/wiki/Heat_map) data visualization. - [react-use-focus-trap](https://github.com/activenode/react-use-focus-trap) — Ever tab through a modal and can't find your way back? - [react-query-helper](https://github.com/dano-inc/react-query-helper) — [React Query](https://react-query.tanstack.com) goodness but made simpler and easier. - [react-google-calendar-api](https://github.com/Insomniiak/react-google-calendar-api) — Integrate your app with Google Calendar. 🥦 And on a health kick.. [Calories-In: A New Year, A New You?](https://github.com/vangelov/calories-in) — The perennial polesitter of New Year’s resolutions is losing weight or improving health in some way — often achieved by eating better. What better way to welcome in 2022, therefore, than a React powered meal planner..! Submitted by a React Status reader, you can check out a [live version](https://calories-in.com) or watch a [video demo](https://www.tella.tv/video/ckxdaysli000309mf76jd4onp/view). Vladimir Angelov This issue was curated by Terence C. Gannon and edited by the Cooperpress team. 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