Published in Bits and Pieces·Nov 35 Tips to Optimize React Frontend PerformanceHow to Improve React Frontend Performance — In modern web application development, performance is the key to a better user experience. Using React will inevitably result in intuitive user interfaces, providing enhanced user experience for many applications without requiring much effort to optimize for performance explicitly. …React6 min readReact6 min read
Published in Bits and Pieces·Oct 10Choosing Between Inheritance vs Composition for Web ComponentsDifferent ways to Compose UI Components in Web — Code reusability is one of the most commonly used best practices in modern web applications since they consist of multiple web components. However, many developers struggle to maintain a cleaner code structure with minimum redundancy while prioritizing code reusability. So, in this article, I will discuss how we can use…Inheritance5 min readInheritance5 min read
Published in Bits and Pieces·Jul 4WebSockets vs. Server-Sent EventsDifference Between Server-Sent-Events and WebSockets — Over the years, the HTTP request-response model has been used for client-server communications in web applications. However, with the popularity of real-time web applications, the need has emerged for servers to be able to push data to clients proactively without having clients requesting it first. As a result, push technology-based…Websocket6 min readWebsocket6 min read
Published in Bits and Pieces·Jun 1Using Non-SSR Friendly Components with Next.jsHow to disable SSR for Non-SSR Friendly Components in Next.js — Next.js has become one of the most popular frameworks in the React ecosystem. It facilitates developing Server-side rendered (SSR) React apps without starting over with create-react-app. Next.js routing and other built-in configurations are designed primarily for SSR and crawling towards Static Site Generation (SSG). But, there can be instances where…Nextjs5 min readNextjs5 min read
Published in Bits and Pieces·Mar 11React.memo() vs. useMemo()What are the major differences between React.memo() vs useMemo()? — Performance optimization is an important factor in web development. React uses “memoization” as an optimization technique to speed up the rendering process of the components. It offers React.memo() and useMemo() to implement memoization. This article will compare and contrast React.memo and useMemo() while discussing their use cases.React6 min readReact6 min read
Published in Bits and Pieces·Mar 7Building Design Systems: How to Treat CSS StylesTips and Tricks to Style Your Design System — A design system is a collection of design tokens, practices, and reusable components that helps keep things consistent for your design and product teams. Colours, typography, icons, and many more are related to styles that help determine how the brand is presented in the UI. Therefore, when developing your design…CSS7 min readCSS7 min read
Published in Bits and Pieces·Dec 2, 2021Declarative Data Fetching with React AsyncUsing React Async to Handle Asynchronous UI States in React Applications — With JavaScript, we typically use async/await for asynchronous operations like data fetching. The same remains even if we use UI libraries like React. But, what if you get a React component and a Hook to fetch data instead? React Async exactly does that by providing a component-driven approach to fetch…React5 min readReact5 min read
Published in Enlear Academy·Nov 11, 2021What’s New in React Router 6?A Quick Overview of React Router v6 — React Router is the most popular lightweight, fully-featured routing library for React. And the React Router version 6, the latest release is finally here! It first launched in an alpha version in early 2021 and is now in a stable release. …React5 min readReact5 min read
Published in Bits and Pieces·Nov 9, 2021JavaScript Sanitizer API: The Modern Way to Safe DOM ManipulationHow to use sanitizer API to render HTML strings securely — Web applications often need to work with HTML input. But, rendering them securely on a web page is challenging since they are vulnerable to cross-site scripting (XSS) attacks. In this article, I will discuss how we can use the new Sanitizer API to address these security concerns with examples while…HTML5 min readHTML5 min read
Published in Bits and Pieces·Nov 1, 2021Common React Hooks Mistakes You Should Avoid5 Common mistakes to avoid when using react hooks — React Hook feature was first introduced on React 16.8 update and became immensely popular among developers due to its capabilities. It allows you to hook into React state and lifecycle features. And, sometimes, it could be challenging when using it for advanced use cases. In this article, I’ll discuss 5…React5 min readReact5 min read
