--- title: "Why use hooks over HOCs?" publication: "React Status" issue: 210 published_at: "2020-10-14" canonical_url: "https://react.statuscode.com/issues/210" --- ⚛️ This week's React news, links, and libraries #210 — October 14, 2020 [Read on the Web](https://react.statuscode.com/issues/210) React Status Your weekly React news digest, every Wednesday [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/m8oqblecanpgo5eogn8r.jpg)](https://github.com/silevis/reactgrid) [ReactGrid: Add a Spreadsheet-like Experience to Your React App](https://github.com/silevis/reactgrid) — The UI element you can _almost_ guarantee will be familiar to your app’s prospective users is a spreadsheet grid. The fully-featured [ReactGrid](https://reactgrid.com) comes in both [MIT-licensed and commercial](https://reactgrid.com/feature-comparison)versions and can be [demoed here.](https://reactgrid.com/examples) Silevis Software [Why React Hooks Over Higher-Order Components](https://www.robinwieruch.de/react-hooks-higher-order-components) — Robin is back with a fantastic set of examples demonstrating the advantages of using hooks over higher-order components. Robin Wieruch [![\](https://copm.s3.amazonaws.com/b2dbdcc6.jpg)](https://frontendmasters.com/courses/next-js/?utm_source=newsletter&utm_medium=email&utm_campaign=reactweekly-nextjs) [New Course: Introduction to Next.js, The Full-Stack React Framework](https://frontendmasters.com/courses/next-js/?utm_source=newsletter&utm_medium=email&utm_campaign=reactweekly-nextjs) — Next.js is a complete framework built on top of React.js. You'll learn server-side rendering, static site generation, data fetching, code API endpoints, creating pages with the file system, add CSS modules, and more. Frontend Masters sponsor [![\](https://res.cloudinary.com/cpress/image/upload/v1602677617/ueiocoifl4tm4ory27qi.png)](https://dericgw.github.io/react-tiny-fab/) [React Tiny Fab: An Accessible 'Floating Button' Component](https://dericgw.github.io/react-tiny-fab/) — Android-esque ‘floating buttons’ that stay above the main content. Check out the example in the bottom right of the homepage. [GitHub repo.](https://github.com/dericgw/react-tiny-fab) Deric Cain **⚡️ Quick bytes:** - [webpack 5](https://webpack.js.org/blog/2020-10-10-webpack-5-release/) has been released. We'll be focusing on this more in [JavaScript Weekly](https://javascriptweekly.com/) on Friday but here's [a video tour](https://www.youtube.com/watch?v=3c-RFpaiUT8) of the main changes. - Dan Abramov notes [the release of React 17 release candidate 3](https://twitter.com/dan_abramov/status/1314293585739681792?s=20) and suggests this will match the release version unless any more bugs are reported ASAP. - How far we’ve come since Bill Gates is alleged to have said “the Internet is just a passing fad” as [Microsoft is using React to unify Outlook](https://www.neowin.net/news/microsoft-plans-to-unify-outlook-across-platforms-using-web-technologies) across multiple platforms. 💻 Jobs [Full-Stack Engineer (React + Rails) [Remote\]](https://www.reforge.com/careers/senior-software-engineer) — Reform professional education. We're bootstrapped and profitable, are led by 3x successful founder, and we tell a lot of dad jokes. Reforge [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 and Stories [Four Characters Can Optimize Your React Component](https://www.benmvp.com/blog/four-characters-optimize-react-component/) — The author admits the title “is kinda clickbait-y” but then goes on to explain that just four characters _really do_ differentiate two methods of initializing state. Without peeking, do you know what they are? Ben Ilegbodu [How I Structure React Apps](https://t.co/gE3Sqe04c8?amp=1) — Another instalment in this mini-series on how others are structuring their React apps. The comparison is valuable even if you eventually decide to do things your own, unique way. Chetan Raj ▶[Fullstack Jamstack with Next.js](https://www.youtube.com/watch?v=TNKzKtNTjls&list=PLZ14qQz3cfJJOcbbVi_nVEPqC2334LLMz) — A return engagement with [James Quick](https://www.linkedin.com/in/jamesqquick/), this time to kick off a series of videos on [Jamstack](https://jamstack.org). [Next.js](https://nextjs.org) is a good choice, but as he says “it can’t do everything”. James Quick (Auth0) [Take the KendoReact Team's Early Web Cheese Challenge](https://www.telerik.com/blogs/take-kendoreact-teams-early-web-cheese-challenge?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-event-codepen-oct-challenge&utm_content=sponsored-link) — This month, we’re partnering with CodePen to offer weekly challenges inspired by the web’s early days. [Time to show off](https://www.telerik.com/blogs/take-kendoreact-teams-early-web-cheese-challenge?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-event-codepen-oct-challenge&utm_content=sponsored-link). Progress KendoReact sponsor [Review of Chakra UI](https://blog.bitsrc.io/review-of-chakra-ui-651157bdf43a) — Rather than having the author of the [Chakra UI](https://chakra-ui.com) advocate on his own behalf, here’s a third-party review of the increasingly-popular [framework](https://github.com/chakra-ui/chakra-ui/) which focuses on building [accessible](https://en.wikipedia.org/wiki/Computer_accessibility) apps. Classic Reagan [Five Awesome React Packages to Check Out](https://t.co/xZpEeDYRof?amp=1) — At last count we have well over 500 React-related GitHub repos in our database — it’s an embarassment of riches. They can take a long time to sort through, however, which is why somebody sharing their favourites is a time saving bonus. Varun Chilukuri [Understanding the Image Component in React Native](https://code.tutsplus.com/tutorials/understanding-the-image-component-in-react-native--cms-35877) — It’s hard to imagine getting very far in the mobile app space without some consideration for how images will be organized and presented. This thorough, detailed tutorial provides most of what you need to know. Esther Vaati 🔧 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1602677019/au0toenz1jdgoocr1x8o.png)](https://github.com/Paol-imi/react-reparenting) [ReactReparenting: Shared Custody for Components?](https://github.com/Paol-imi/react-reparenting) — Move a component from one parent to another without remounts or losing internal state. All it takes is a few lines of code. Paolo Longo [rc-pagination: Pagination Made Easy](https://github.com/react-component/pagination) — If you believe the interests of your users are best served with paged content, this library provides a [wide variety of options](https://react-component.github.io/pagination/?path=/story/rc-pagination--jumperwithgobutton). react-component [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) Stream sponsor [React Countdown: A Customizable Countdown Component](https://github.com/ndresx/react-countdown) — Seems quite flexible and here’s a [very basic CodeSandbox example.](https://codesandbox.io/s/cool-fermat-uk0dq) Martin V. [Abstract Complex Configurations Into a Single Dependency with Razzle](https://github.com/jaredpalmer/razzle) — Want more than [create-react-app](https://create-react-app.dev) delivers and yet not ready to fully embrace a full blown framework like [Next.js](https://nextjs.org)? [Razzle](https://razzlejs.org) provides an alternative path for your [SSR](https://www.youtube.com/watch?v=GQzn7XRdzxY) and [SPA](https://en.wikipedia.org/wiki/Single-page_application) projects. Jared Palmer [Atlassian Design System: Components and Patterns to Create Beautiful UIs (But Only for Atlassian Related Tools)](https://atlassian.design/) — Lots to look at here, but note that [according to the license](https://atlassian.design/license), these are to be used “solely in connection with … products or services that interoperate or are integrated with Atlassian’s software and hosted products.” Atlassian [react-chat-ui: Roll Your Own Chat Interface](https://github.com/brandonmowat/react-chat-ui) — These days, no consumer-facing app is seemingly complete without that little chat ‘bug’ in the corner of the UI. Here are some components to help you in implementing your own. Brandon Mowat 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