--- title: "Ten React security best practices" publication: "React Status" issue: 214 published_at: "2020-11-11" canonical_url: "https://react.statuscode.com/issues/214" --- This week's React news, links, and libraries #214 — November 11, 2020 [Read on the Web](https://react.statuscode.com/issues/214) React Status Your weekly React news digest, every Wednesday [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/bxirstcy3m94bzt7oal7.jpg)](https://github.com/naver/egjs-flicking) [Flicking: A Carousel Component with 30M Daily Users](https://github.com/naver/egjs-flicking) — Naver, a South Korean portal and search engine, claims 30 million people use their carousel component every day. While [using it from React](https://github.com/naver/egjs-flicking/blob/master/packages/react-flicking/README.md) is straightforward, it can work with Angular and Vue too. Naver [Ten React Security Best Practices](https://snyk.io/blog/10-react-security-best-practices/) — A compact distillation of seemingly everything you need to know about making your React app more capable of withstanding exploits. This includes a methodology for automating testing to help ensure you’ve done it right. Ron Perris [![\](https://copm.s3.amazonaws.com/06163abe.png)](https://blog.newrelic.com/product-news/aws-lambda-extensions-integrations/?utm_campaign=FY21-Q3-DEV-OBSV-AMER-RS-NL-None-B_LE&utm_medium=NL&utm_source=RS&utm_content=B_LE&fiscal_year=FY21&quarter=Q3>m=DEV&program=OBSV&ad_type=None&geo=AMER) [Achieving Observability with AWS Lambda Extensions](https://blog.newrelic.com/product-news/aws-lambda-extensions-integrations/?utm_campaign=FY21-Q3-DEV-OBSV-AMER-RS-NL-None-B_LE&utm_medium=NL&utm_source=RS&utm_content=B_LE&fiscal_year=FY21&quarter=Q3>m=DEV&program=OBSV&ad_type=None&geo=AMER) — Amazon Web Services recently announced AWS Lambda Extensions, a new way to run code in parallel without being bound by the Lambda lifecycle. Learn how New Relic integrates with the Extensions API to make monitoring your AWS functions even easier. New Relic sponsor [Use CSS Variables Instead of React Context](https://epicreact.dev/css-variables/) — Concerned about performance but want to offer users multiple 'themes' (e.g. dark/light mode)? [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) can provide a performance advantage over [React Context](https://reactjs.org/docs/context.html) in this context. Kent C. Dodds [Building Serverless Front-End Apps on Google Cloud Platform](https://www.smashingmagazine.com/2020/11/serverless-frontend-applications-google-cloud-platform/) — [Serverless computing](https://cloud.google.com/serverless) has been gaining momentum for quite some time (_and we [have a newsletter for that](https://serverless.email?ref=reactstatus214)_). If you are still a little mystified as to how exactly to incorporate them into your app, this provides a clear explanation of the serverless concept and then provides specific examples of how to employ it. Nwani Victory [How To Build A GraphQL Server Using Next.js API Routes](https://www.smashingmagazine.com/2020/10/graphql-server-next-javascript-api-routes/) — Before you kick-off your new project with the usual combination of [REST](https://en.wikipedia.org/wiki/Representational_state_transfer) and [GraphQL](https://graphql.org), consider [Next.js API Routes](https://nextjs.org/docs/api-routes/introduction) as an alternative. It may be a better choice if you plan on eventually extending your app with a backend. Ibrahima Ndaw 💻 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 projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team [Find Your Next 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) — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers. Vettery 🧑‍💻 _Interested in running a job listing in React Status? There's [more info here.](https://booking.cooperpress.com/jobs)_ 🛠 Tutorials, Articles & Stories [Useful Custom Hooks for Tired React Devs](https://t.co/V6aFqoNltB?amp=1) — The author asserts that in addition to being able to maintain state, React Hooks are also _reactive_ and _composable_. Given that’s the case, why not use them to make things more efficient by reusing existing behaviours you have already implemented? Tom Norton [A Dive Into React and Three.js Using `react-three-fiber`](https://www.smashingmagazine.com/2020/11/threejs-react-three-fiber/) — [react-three-fiber](https://github.com/pmndrs/react-three-fiber) is a React renderer for [Three.js](https://threejs.org/) and in this tutorial you’ll learn how to configure and build 3D models in a React application. Fortune Ikechi [Using Your Own Design System with KendoReact Components](https://css-tricks.com/using-your-own-design-system-with-kendoreact-components/?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-awareness-css-tricks-styling&utm_content=sponsored-link) — CSS-Tricks take KendoReact for a spin and play with the styling capabilities of the React UI library. [Read the blog](https://css-tricks.com/using-your-own-design-system-with-kendoreact-components/?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-awareness-css-tricks-styling&utm_content=sponsored-link%20). Progress KendoReact sponsor ▶[How to Build a Contact Form with React and AWS Amplify](https://www.youtube.com/watch?v=cJUtkerwIQM) — Brings together a variety of ideas in just 16 minutes. Marcia Villalba [Seven Things Every React Project Should Start With](https://t.co/87NPKlkibl?amp=1) — We try not to forget that each week we have lots of readers who are new to React. Specifically for those folks–but of some interest to all–here’s an **opinionated** checklist of what your new project should include. Luis Guerrero [Creating Mirrors in React-Three-Fiber and Three.js](https://tympanus.net/codrops/2020/09/30/creating-mirrors-in-react-three-fiber-and-three-js/) — A brief walk-through of how to create a mirror scene. This is for you if you like creating striking visual effects with JavaScript. Gianmarco Simone and Marco Ludovico Perego [How to Organize a Large React Application and Make It Scale](https://www.sitepoint.com/organize-large-react-application/) Jack Franklin 🛠 Code and Tools supported by [![Okta\](https://res.cloudinary.com/cpress/image/upload/v1602154330/de7dtktheistsfpqdem4.png)](https://developer.okta.com/?utm_campaign=newsletter_cooperpress_all_multiple_inc_dev_sponsored-section_null&utm_source=cooperpress&utm_medium=cpc) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/gghe9vk3kosvmp1qi1cv.jpg)](https://itnext.io/popular-node-js-react-admin-panel-adminbro-just-got-version-3-3-the-biggest-release-this-year-ced0a90e3431) [AdminBro 3.3: A Popular Node + React Admin Panel](https://itnext.io/popular-node-js-react-admin-panel-adminbro-just-got-version-3-3-the-biggest-release-this-year-ced0a90e3431) — You might not like the name (they promise they are ‘working on it’, so watch this space..) but it’s a neat and useful project nonetheless and this release only gets more powerful. Wojciech Krysiak [React Frontload 2.0: Simple Full-Stack Data Loading for React](https://davnicwil.com/react-frontload/) — Do full stack data loading and state management inline in React components by writing a data loader in your component (with a hook) and it ‘just works’ with SSR and in the browser. David Nicholas Williams [Live Workshop: Getting Started with OpenTelemetry in Node.js](https://go.lightstep.com/signup-opentelemetry-node-js-distributed-tracing-workshop.html?utm_campaign=react&utm_source=cooper&utm_medium=Email) Lightstep sponsor [REAVIZ 9.0: A D3.js-based React Data Visualization Library](https://reaviz.io/?path=/story/docs-intro--page) — Definitely worth a look if you want to create elaborate charts and plots. [GitHub repo.](https://github.com/jask-oss/reaviz) REAVIZ [react-s3-uploader: Simplified Access to the Pervasive AWS Object Storage Service](https://github.com/odysseyscience/react-s3-uploader) — [S3](https://aws.amazon.com/s3/) is a price-competitive, robust, widely-used object store from Amazon Web Services. A React component which enables easy uploads makes the decision to use S3 in your next project even easier. Odyssey Science Innovations [react-vertical-timeline-component: Express Your Data Chonologically](https://github.com/stephane-monnot/react-vertical-timeline) — In [Issue 212](https://react.statuscode.com/issues/212) a couple of weeks back we featured the [react-chrono](https://github.com/prabhuignoto/react-chrono) timeline component. Here’s another crack at the same problem. While arguably a little less flexible, it’s simple configuration may make it easier to implement. Stéphane Monnot [Simple Light: A Free Landing Page Template Built With Tailwind CSS](https://github.com/cruip/tailwind-landing-page-template) — Fans of [Tailwind CSS](https://tailwindcss.com) will delight in this landing page template built with it. The [live demo](https://simple.cruip.com) is impressive and has a very strong SaaS homepage vibe. Cruip 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