--- title: "Avoiding those code smells" publication: "React Status" issue: 248 published_at: "2021-07-21" canonical_url: "https://react.statuscode.com/issues/248" --- Plus accessible combo boxes, intelligent image cropping, and more. | #​248 — July 21, 2021 [Read on the Web](https://react.statuscode.com/issues/248) React Status ⚛️ _Your weekly React news digest, every Wednesday_ [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/ewglube0bouxr9wchsug.jpg)](https://react-spectrum.adobe.com/blog/building-a-combobox.html) [Adobe's Efforts in Creating an Accessible Autocomplete Experience for _React Spectrum_](https://react-spectrum.adobe.com/blog/building-a-combobox.html) — Adobe is placing a very high priority on accessibility in the [Spectrum](https://react-spectrum.adobe.com/index.html) design system. That is judging by the time, effort and thought they have put into making a ubiquitous combo-box easier to use for _everybody_. Daniel Lu [Five Code Smells React Beginners Should Avoid](https://t.co/W62FGhVPpg?amp=1) — About to pull the trigger on your first big pull request for a high profile project? You should probably go through this checklist first. Jason Lee Hodges [![\](https://copm.s3.amazonaws.com/21d4c75f.png)](https://userfront.com/tutorials/react-authentication.html) [React Authentication, Simplified](https://userfront.com/tutorials/react-authentication.html) — Authentication is one of those things that just always seems to take a lot more effort than we want it to. In this article, we lay out a different approach to authentication (plus access control & SSO) in React applications. Userfront sponsor [Remotion 2.2: 'Write Videos' in React](https://www.remotion.dev/blog/2-2/) — In case you missed it back in February when we featured [Remotion](https://www.remotion.dev), it's a pretty exciting way to work with video using the React concepts and constructs you know and love. _"If you know React you can make videos."_ Jonny Burger [Create a Fullstack Next.js App with Authentication, Data and Storage](https://welearncode.com/build-a-fullstack-app-nextjs/) — How can you build a full-stack application with what is ostensibly a front-end framework? Spoiler alert: It involves [AWS Amplify](https://aws.amazon.com/amplify/). Ali Spittel [Introducing the New Overlay Hooks for Ionic React](https://ionicframework.com/blog/introducing-the-new-overlay-hooks-for-ionic-react/) — Although V6 is already out in beta, these new hooks in V5.6 will give you better, more natural control over UI elements such as alerts, modals and pop-ups. Ely Lucas 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 and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team [Front-End Developer - Utrust (Remote, GMT -2/+4)](https://careers.utrust.com/front-end-developer/en) — We are changing the world with crypto. Join our team, working with technologies such as React, Redux, GraphQL and TypeScript. Utrust [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 [What's the Difference Between Controlled and Uncontrolled Components in React?](https://t.co/tED1pRQqeM?amp=1) — A very quick and precise differentiation between these two broad categories of components. Alyssa E. Easterly [How to Stop Re-Rendering Lists in React](https://alexsidorenko.com/blog/react-list-rerender/) Alex Sidorenko ▶[How to Setup and Deploy React 18 Alpha Using Snowpack & Vercel](https://www.youtube.com/watch?v=enqRAjGox2Q&t=9s) Deji Adesoga [How to Parse Markdown in Next.js](https://flaviocopes.com/nextjs-parse-markdown/) Flavio Copes 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/qs8p7af1bflj9mtjgfcf.jpg)](https://github.com/useflyyer/use-smartcrop) [use-smartcrop: Content Aware Image Cropping Hook](https://github.com/useflyyer/use-smartcrop) — A React wrapper for [smartcrop.js](https://github.com/jwagner/smartcrop.js/) and [color-thief](https://lokeshdhakar.com/projects/color-thief/) which algorithmically predicts good crops for images. Flyyer [useCookieConsent](https://github.com/bring-shrubbery/use-cookie-consent) — The prompts encouraged by certain interpretations of the [GDPR data protection rules](https://gdpr-info.eu) are everywhere these days; this hook could make implementing them and being compliant with the rules more straightforward. Antoni Silvestrovič [How to Implement a React Data Grid in 16 Minutes: Video Tutorial](https://www.telerik.com/videos/kendo-ui/how-to-implement-a-react-data-grid-getting-started-with-the-kendoreact-grid?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-video-grid-tutorial) Progress KendoReact sponsor [React Tags](https://github.com/react-tags/react-tags) — A tagging component ready to use in your React projects and inspired by Gmail’s _To_ field functionality. Prakhar Srivastav and Aakansha Doshi [Bulletproof React: An Architecture for React Apps](https://github.com/alan2207/bulletproof-react) — Using a group chat application as the case study, the author touches on every significant aspect of building and deploying a React application which will make it “bulletproof” and therefore production ready. Note, however: _"This is not supposed to be a template or a framework. It is an opinionated guide that shows how to do some things in a certain way."_ Alan Alickovic [React Wavify](https://github.com/woofers/react-wavify) — A UI component which incorporates the physics of real waves configured by a series of parameters. It’s pleasantly soothing to watch. Jaxson Van Doorn ## ⚡️ Quick Bits: - [react-letter](https://github.com/mat-sz/react-letter) — Embed HTML email content into your app. - [react-hook-form-persist](https://npmjs.com/package/react-hook-form-persist) — A storage agnostic persistance hook to go with [React Hook Form](https://react-hook-form.com). - [react-color-palette](https://github.com/Wondermarin/react-color-palette) — Lightweight color picking component, now in its sixth major release. - [auth0-react](https://github.com/auth0/auth0-react) — Add [Auth0](https://auth0.com) (the popular commercial authentication service) to a React single page application (SPA). 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