Next.js 13 was recently released at the Next.js conference. Many new features are included, including new routing, a new way to fetch data (React suspense), Vercel fonts, og image generation, layouts, and more. These new features have the potential to be game changers, and they promise to be extremely fast. But not without consequences. Let’s go into more detail about them. Turbopack: The successor to Webpack. Turbopack, the brand new build tool led by the creator of Webpack, Tobias Koppers, will be the Web’s next-generation bundler. Rust was used to construct it from the ground...
A Contemporary Guide on React State Patterns in 2021
Since the initial release of React in 2013, Facebook has rolled out a robust collection of tools to help developers with some of the minutiae of the web application development process, allowing them to focus on what matters most. Despite React’s many capabilities and widespread adoption among developers, I’ve discovered that many of us face the same question: How can we handle complicated states with React? You may like: Crud Using React Hooks and Context API This post will look at what state is, how to arrange it, and alternative patterns to use as our applications become...
Best Practices for Checking PropTypes in React Components using TypeScript
JavaScript functions that return React elements are known as React components. These are the parameters that govern what will be added to the DOM. In addition, react components, like functions, may receive props as arguments, resulting in dynamically returned items. Props can be of any data type, although component data types may differ. Component A, for example, may anticipate a name argument with a text data type, but component B may anticipate an age argument with a numeric data type. Likewise, D may anticipate an onClick argument with a Function data type, but C may expect a post...
Crud Using React Hooks and Context API
React Hooks and Context API are two relatively new features that have been added to React from v16.8 and v16.3 respectively. In this post, I'm going to create an app that can perform CREATE, READ, UPDATE and DELETE utilizing Hooks and Context API together.This new concept was introduced in v16.8 which is an alternative to classes. The Devs who used React before are familiar with functional components and class components. Many of these features available to classes - such as lifecycle methods and state weren't available to React until Hooks were introduced. The new Hooks add those class...