--- title: "The most 'admired and desired' Web technology" publication: "React Status" issue: 344 published_at: "2023-06-21" canonical_url: "https://react.statuscode.com/issues/344" --- Plus a chessboard component, RSCs in 7 minutes, and what you need to know for your first React job. | #​344 — June 21, 2023 [Read on the Web](https://react.statuscode.com/issues/344) Together with [![Frontend Masters logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_300,h_70/e_make_transparent/co_white,e_outline:5/nk0tfdvalivacz8rw7rt.png)](https://frontendmasters.com/courses/enterprise-ui-dev/?utm_source=email&utm_medium=reactstatus&utm_content=uidev) React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/xeaxl2nhrrtl0umghomg.jpg)](https://panda-css.com/) [Panda CSS: Modern, Build-Time, Type-Safe CSS-in-JS](https://panda-css.com/) — Best known for the [Chakra UI](https://chakra-ui.com/) component library, Segun Adebayo is back with a new DX-focused CSS-in-JS approach boasting build-time generated styles and type safety out of the box. It works with Remix, Vite, Next.js, Astro, and even server components. Segun Adebayo [Introducing Codux: A Visual Editor for React Developers](https://www.smashingmagazine.com/2023/06/codux-react-visual-editor-improves-developer-experience/) — This may be a sponsored post over at Smashing Magazine, but it does a better job of presenting Wix’s [Codux](https://www.codux.com/) visual-based React IDE than their own launch post did back in December when we featured it. Geoff Graham (Smashing Magazine) [![\](https://copm.s3.amazonaws.com/b87962f3.jpg)](https://frontendmasters.com/courses/enterprise-ui-dev/?utm_source=email&utm_medium=reactstatus&utm_content=uidev) [Enterprise UI Development: Testing & Code Quality](https://frontendmasters.com/courses/enterprise-ui-dev/?utm_source=email&utm_medium=reactstatus&utm_content=uidev) — Managing or migrating large apps and codebases? This video course covers what you need to know to scale efficiently whilst maintaining code quality. Covers unit testing, CI pipelines, mocking, code coverage, and more. Frontend Masters sponsor [![\](https://res.cloudinary.com/cpress/image/upload/w_200,e_sharpen:60,q_auto/qgjrlxvngemblov14uig.jpg)](https://www.propelauth.com/post/using-usemutation-to-make-an-advanced-toggle-in-react) [Using `useMutation` to Make an Advanced Toggle](https://www.propelauth.com/post/using-usemutation-to-make-an-advanced-toggle-in-react) — _Advanced_ in this case means a typical on/off toggle control but with features like making external requests, showing loading spinners, and optimistic updating. Andrew Israel [Hyper Fetch 5.0: The Fetching Framework](https://hyperfetch.bettertyped.com/blog/hyper-fetch-5-0/) — All the logic necessary for performing requests, caching, queuing, providing offline support and enabling persistence for queued requests and caches. v5.0 has many new features, rounded up here, along with adapters for Firebase, Axios and GraphQL. Pyrc and Skawina **IN BRIEF:** - ❤️ In this year's Stack Overflow developer survey results, React came second in the list of [most popular Web frameworks](https://survey.stackoverflow.co/2023/#section-most-popular-technologies-web-frameworks-and-technologies) and is the most broadly ['admired and desired' Web technology](https://survey.stackoverflow.co/2023/#section-admired-and-desired-web-frameworks-and-technologies). - If you're a new React developer and unsure of your skills when applying for your first React position, Sebastien Castiel has [some words of encouragement for you](https://scastiel.dev/what-to-know-react-first-job) on what you do and don't need to know. - 🤖 Vercel continues to innovate by offering a new [Vercel AI SDK](https://vercel.com/blog/introducing-the-vercel-ai-sdk) for streaming responses from popular AI/LLM services, and they've also unveiled [an AI accelerator program](https://vercel.com/blog/vercel-ai-accelerator), a program for AI builders and startups to apply for up to $850k in value of AI-related credits and resources. - ❓ The folks behind the popular _State of JS_ and _State of CSS_ surveys are working on a _State of React_ survey. You can [preview it here](https://survey.devographics.com/en-US/survey/state-of-react/2023), if you're intrigued, but your answers won't count for now. - A little birdie tells us React Native 0.72 is likely to be released later today, so if that interests you, keep an eye [on their blog.](https://reactnative.dev/blog) [Building the Foundation of a Full-Stack App with Nest, Next.js and tRPC](https://www.tomray.dev/nestjs-nextjs-trpc) — Discover how to create a fully type-safe [pnpm](https://pnpm.io) monorepo using [NestJS](https://nestjs.com/), a powerful Node.js backend framework, _and_ Next.js. This covers the integration of tRPC as the API layer, providing end-to-end type-safety for full-stack TypeScript apps. Tom Ray 💡 As it happens, [NestJS 10 was just released](https://trilon.io/blog/nestjs-10-is-now-available). [SwiftUI Stole the Best Parts of React (And My Heart)](https://www.mux.com/blog/swiftui-against-react) — After years of building React apps, Liam has had his head turned by Apple in a big way. Liam Lindner ▶[A React Testing Crash Course for Next.js Apps](https://www.youtube.com/watch?v=Q-Sg4p_iQvw) — It’s three hours long, but Anson focuses on the essentials and walks through everything step by step. Anson the Developer ▶[React Server Components in Under Seven Minutes](https://www.youtube.com/watch?v=1YCccF3Bu3Q) — Looking to quickly get a basic handle on RSCs? This fast-paced video tries to bootstrap you on the subject. CodeLit [Creating a 'Tilt' Effect with Tailwind CSS](https://www.julienthibeaut.xyz/blog/create-tilt-effect-with-react) — React and Tailwind come together to give the effect of an element ‘tilting’ on hover by using CSS’s rotation functions. Julien Thibeaut [Keeping Apollo Cache Up-to-Date After Mutations](https://www.splitgraph.com/blog/keeping-apollo-cache-up-to-date-after-mutations) Grzegorz Rozdzialik 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/kny4okrzp2mz3iva8gnb.jpg)](https://react-wrap-balancer.vercel.app/) [React Wrap Balancer 1.0: A Component for Better Title Displays](https://react-wrap-balancer.vercel.app/) — A simple component that improves the rendering of _titles_ in your app by avoiding single overhanging words. [v1.0](https://github.com/shuding/react-wrap-balancer/releases/tag/1.0.0) is a key milestone release that lets the component now use the native CSS `text-wrap: balance` property when supported. Shu Ding [Recharts 2.7: Chart Library Built with React and D3](https://recharts.org/en-US/) — Easy to deploy with declarative components, and native SVG support. Line, bar, scatter, composed, pie, and radar charts are offered. There are [many examples](https://recharts.org/en-US/examples), complete with code. [GitHub repo.](https://github.com/recharts/recharts) recharts [React Authentication — Without Complexity](https://userfront.com/tutorials/react-authentication?&utm_source=react-statuscode-com&utm_medium=newsletter&utm_campaign=sponsored_link&utm_content=react_authentication) — Userfront streamlines authentication & access control so engineers can focus on their core business. Read the docs now. Userfront sponsor ♜ [react-chessboard: Yes, A Chess Board Component](https://github.com/Clariity/react-chessboard) — Looking for a graphical front-end for your chess-playing AI chatbot? This is the one used by [ChessOpenings](https://chessopenings.co.uk). Ryan Gregory [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/zcuy5itmkhdam7vczijo.jpg)](https://github.com/xrutayisire/react-js-cron) [ReactJS Cron: A Component to Edit Cron Schedules](https://github.com/xrutayisire/react-js-cron) — Built with [Ant Design](https://github.com/ant-design/ant-design), this lets you work with cron-style schedules using drop down select boxes. [Demo here.](https://xrutayisire.github.io/react-js-cron/?path=/docs/reactjs-cron--demo) Xavier Rutayisire - [React Modal Sheet 2.0](https://github.com/Temzasse/react-modal-sheet) – Flexible bottom sheet component built with Framer Motion for smooth transitions ([Demos.](https://temzasse.github.io/react-modal-sheet/)) - [Sonner 0.5](https://github.com/emilkowalski/sonner) ↳ Opinionated toast notifications component. - [React Day Picker 8.8](https://react-day-picker.js.org/) ↳ Customizable date picker component. - [react-native-view-shot 3.7](https://github.com/gre/react-native-view-shot) ↳ Snapshot a React Native view and save it to an image. - [React Drawer 6.3](https://github.com/react-component/drawer) ↳ A sliding drawer component. ([Demo.](https://drawer-react-component.vercel.app/demo/base)) - [React Tooltip 5.14](https://react-tooltip.com/) - [react-native-safe-area-context 4.6](https://github.com/th3rdwave/react-native-safe-area-context) Jobs [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) — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now. Hired This issue was curated by Terence C. Gannon and Peter Cooper 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