--- title: Best LogRocket posts — April 2022 | daily.dev description: The most upvoted LogRocket posts from April 2022, curated by the daily.dev community. canonical: https://daily.dev/sources/logrocket/best-of/2022/04 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/logrocket/best-of/2022/04 og:type: website og:site_name: daily.dev og:title: Best LogRocket posts — April 2022 | daily.dev og:description: The most upvoted LogRocket posts from April 2022, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of LogRocket — April 2022 1. 1 [](https://daily.dev/posts/how-to-detect-dead-code-in-a-frontend-project-oqwgwn-j3 "How to detect dead code in a frontend project") Article LogRocket · 4y How to detect dead code in a frontend project Using ESLint to detect and remove dead code in your frontend project.Using webpack for dead code detection.Using TypeScript to detect dead code.Detect unused dependencies with depcheck.Using the no-unused-vars rule to detect unused variables in our files. 184 9 2. 2 [](https://daily.dev/posts/the-best-typescript-orms--df3lg1sk "The best TypeScript ORMs") Article LogRocket · 4y The best TypeScript ORMs object-relational mappers (ORMs) have been a controversial subject amongst many developers. In some cases, poorly-written ORMs may lead to performance bottlenecks when compared with raw queries. In other cases, ORMs can come in handy when you need quick and easy access to database methods. 44 3 3. 3 [](https://daily.dev/posts/graphql-vs-grpc-vs-rest-choosing-the-right-api-6i-tv4rd3 "GraphQL vs gRPC vs REST: Choosing the right API") Article LogRocket · 4y GraphQL vs gRPC vs REST: Choosing the right API GraphQL is a data query language that uniquely allows clients to request any data that they need. As opposed to REST’s HTTP methods, GraphQL uses queries, mutations, and subscriptions for sourcing and manipulating data. The three most popular technologies currently for creating APIs are GraphQL, gRPC, and REST. 40 4. 4 [](https://daily.dev/posts/how-to-escape-from-memory-leaks-in-javascript-4qog-3z9f "How to escape from memory leaks in JavaScript") Article LogRocket · 4y How to escape from memory leaks in JavaScript A memory leak is an allocated piece of memory that the JavaScript engine is unable to reclaim. Memory leaks are caused due to flaws in your logic, and they make way for poor performance in your application. In high-level languages like JavaScript, memory release is handled by the garbage collector. If you understand how memory allocation and release happens in JavaScript, it’s very easy to solve memory leaks. 31 5. 5 [](https://daily.dev/posts/essential-vs-code-extensions-for-typescript-5lsei5dmk "Essential VS Code extensions for TypeScript") Article LogRocket · 4y Essential VS Code extensions for TypeScript VS Code has rich extensions to help configure and use TypeScript easily. TypeScript ESLint is used to lint your code and check basic code guidelines. By using it, you’re ensuring basic code quality and integrity. Let’s understand how to configure it manually. 25 6. 6 [](https://daily.dev/posts/pagination-and-infinite-scroll-with-react-query-v3-ri1wlqwse "Pagination and infinite scroll with React Query v3") Article LogRocket · 4y Pagination and infinite scroll with React Query v3 React Query makes it easy to fetch, cache, sync, and update server state in React applications. We’ll use the Random User API, which allows you to fetch up to 5,000 random users either in one request or in small chunks with pagination. This article assumes that you have a basic understanding of React. 23 1 7. 7 [](https://daily.dev/posts/understanding-javascript-s-array-groupby-k9-jfnrwo "Understanding JavaScript’s Array.GroupBy") Article LogRocket · 4y Understanding JavaScript’s Array.GroupBy ECMAScript is the standard that defines the different APIs that can be used when coding with JavaScript. Grouping data is very common, but currently unavailable in the standard JavaScript Array API. Justin Ridgewell raised a proposal for adding groupBy to the Array API in June 2021\. This proposal is currently in Stage 3, which means it’s considered complete. 22 8. 8 [](https://daily.dev/posts/guide-to-state-management-in-next-js-46rrwwt66 "Guide to state management in Next.js") Article LogRocket · 4y Guide to state management in Next.js State management is the core of any modern web application. It determines what data is displayed on the screen while the user interacts with it. In this article, we will review many state management methods that you can use to keep track of the states in your Next.js applications. For each solution, I will provide a practical example. 21 9. 9 [](https://daily.dev/posts/choosing-the-best-next-js-hosting-platform-xfbq-1u4j "Choosing the best Next.js hosting platform") Article LogRocket · 4y Choosing the best Next.js hosting platform Vercel, Netlify, and Heroku are all possible hosting solutions for Next.js projects. Vercel offers a few neat features for frontend developers, including Preview Mode. Heroku is a cloud-based hosting platform that lets developers build and test apps on the fly. 20 10. 10 [](https://daily.dev/posts/how-to-build-faster-animation-transitions-in-react-yk3akzsbw "How to build faster animation transitions in React") Article LogRocket · 4y How to build faster animation transitions in React Transition-hook is one of many Hooks available for creating animations in React. It’s lightweight, has simpler syntaxes, and is more performant. At the time of writing, it is not ready for production, so it can’t be used in actual applications. The overhead cost of React Hooks to add animations to your applications is negligible since Hooks are fairly small. 20 1 11. 11 [](https://daily.dev/posts/modern-faster-alternatives-to-eslint-go9mnkvub "Modern, faster alternatives to ESLint") Article LogRocket · 4y Modern, faster alternatives to ESLint In this article, we will look at specific open source libraries that either serve as alternatives to ESLint or can be integrated with ESLint. Some of these libraries are built to outright replace ESLint and improve on aspects such as performance or developer experience. We’ll focus on libraries that work well within the JavaScript ecosystem. 19 12. 12 [](https://daily.dev/posts/complex-vue-3-state-management-made-easy-with-pinia-x1oral-cr "Complex Vue 3 state management made easy with Pinia") Article LogRocket · 4y Complex Vue 3 state management made easy with Pinia Pinia is the de-facto state management tool for Vue apps. In this tutorial, we’ll examine the most important features of Pinia by learning how to create, use, and inspect data stores. Pinia fully supports TypeScript and offers autocompletion for JavaScript code. The Pinia API is maximally simplified. 19 1 13. 13 [](https://daily.dev/posts/how-to-autofocus-using-react-hooks-5z9ucapt9 "How to autofocus using React Hooks") Article LogRocket · 4y How to autofocus using React Hooks Autofocus can make your app more convenient for users. Instead of clicking into a field before typing, they can immediately start typing as soon as a form loads. In this article, we’ll look at how to add autofocus to React input fields. Then, we will make our code reusable by turning what we wrote into a React Hook. 17 1 14. 14 [](https://daily.dev/posts/how-to-write-a-declarative-javascript-promise-wrapper-nnyi-7j-s "How to write a declarative JavaScript promise wrapper") Article LogRocket · 4y How to write a declarative JavaScript promise wrapper Declarative programming is a programming paradigm that generally shows the logic of the code but not the steps followed to get there. Imperative programming requires writing step-by-step code, with each step explained in detail. We’ll also show how it helps make our code more readable and easier to maintain. 17 15. 15 [](https://daily.dev/posts/8-common-react-error-messages-and-how-to-address-them-vohqfhkgk "8 common React error messages and how to address them") Article LogRocket · 4y 8 common React error messages and how to address them It’s guaranteed that you’ll come across error messages at some point. React helps us out by making sure we’re staying on the right track. This article will go over some of the most common React error messages and explain what they mean, what their consequences are, and how to fix them. 16 1 16. 16 [](https://daily.dev/posts/nestjs-vs-hapi-sttny55rm "NestJS vs. Hapi") Article LogRocket · 4y NestJS vs. Hapi Both NestJS and Hapi are Node.js frameworks, which is why many developers question which one is the best for their project. NestJS combines elements of object-oriented programming, functional programming, and functional reactive programming. Hapi has several other key differences, which we’ll discuss throughout this tutorial. 17 17. 17 [](https://daily.dev/posts/why-you-should-be-using-the-dialog-element-mitt-x1rt "Why you should be using the

element") Article LogRocket · 4y Why you should be using the

element Safari has added the support for the

element starting v15.4\. The element is an HTML element that represents a dialog box such as alert, confirmation, inspector, or subwindow. It’s everything you’ll ever want in a dialog, and there isn’t any excuse not to use them in production. 16 2 18. 18 [](https://daily.dev/posts/the-definitive-guide-to-typing-functions-in-typescript--4o2fgyu "The definitive guide to typing functions in TypeScript") Article LogRocket · 4y The definitive guide to typing functions in TypeScript This article is a guide on how to create and use strongly typed functions. TypeScript is a strongly typed subset of JavaScript. It provides the necessary tooling to create type guards for our application. We will use plenty of examples to outline the many functions TypeScript devs can build. 16 [See all LogRocket archives](/sources/logrocket/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/sources/logrocket/best-of/2022/04#page","url":"https://daily.dev/sources/logrocket/best-of/2022/04","name":"Best LogRocket Posts — April 2022","description":"The most upvoted LogRocket posts from April 2022, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/logrocket/best-of/2022/04#items","numberOfItems":18,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/how-to-detect-dead-code-in-a-frontend-project-oqwgwn-j3","name":"How to detect dead code in a frontend project"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/the-best-typescript-orms--df3lg1sk","name":"The best TypeScript ORMs"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/graphql-vs-grpc-vs-rest-choosing-the-right-api-6i-tv4rd3","name":"GraphQL vs gRPC vs REST: Choosing the right API"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/how-to-escape-from-memory-leaks-in-javascript-4qog-3z9f","name":"How to escape from memory leaks in JavaScript"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/essential-vs-code-extensions-for-typescript-5lsei5dmk","name":"Essential VS Code extensions for TypeScript"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/pagination-and-infinite-scroll-with-react-query-v3-ri1wlqwse","name":"Pagination and infinite scroll with React Query v3"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/understanding-javascript-s-array-groupby-k9-jfnrwo","name":"Understanding JavaScript’s Array.GroupBy"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/guide-to-state-management-in-next-js-46rrwwt66","name":"Guide to state management in Next.js"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/choosing-the-best-next-js-hosting-platform-xfbq-1u4j","name":"Choosing the best Next.js hosting platform"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/how-to-build-faster-animation-transitions-in-react-yk3akzsbw","name":"How to build faster animation transitions in React"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/modern-faster-alternatives-to-eslint-go9mnkvub","name":"Modern, faster alternatives to ESLint"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/complex-vue-3-state-management-made-easy-with-pinia-x1oral-cr","name":"Complex Vue 3 state management made easy with Pinia"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/how-to-autofocus-using-react-hooks-5z9ucapt9","name":"How to autofocus using React Hooks"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/how-to-write-a-declarative-javascript-promise-wrapper-nnyi-7j-s","name":"How to write a declarative JavaScript promise wrapper"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/8-common-react-error-messages-and-how-to-address-them-vohqfhkgk","name":"8 common React error messages and how to address them"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/nestjs-vs-hapi-sttny55rm","name":"NestJS vs. Hapi"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/why-you-should-be-using-the-dialog-element-mitt-x1rt","name":"Why you should be using the

element"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/the-definitive-guide-to-typing-functions-in-typescript--4o2fgyu","name":"The definitive guide to typing functions in TypeScript"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Sources","item":"https://daily.dev/sources"},{"@type":"ListItem","position":3,"name":"LogRocket","item":"https://daily.dev/sources/logrocket"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/logrocket/best-of"},{"@type":"ListItem","position":5,"name":"April 2022"}]}]} ```