DEV Community: Rajae Robinson

React 19: Understanding the React Compiler

Rajae Robinson — Tue, 27 Feb 2024 13:33:34 +0000

React 19 is an upcoming major release that brings exciting new features and performance enhancements to the popular JavaScript library. One of the key highlights of React 19 is the React Compiler, a powerful tool that optimizes code and reduces unnecessary re-rendering. In this article, we'll explore the key features of React 19 and dive into the details of the React Compiler.

This article was originally published on bluesockets.com

React 19 Release Date

At the moment, React 19 is still in development and there is no specific release date. However, the React team gave a recent update on the progress they have made in research to improve React.

// Detect dark theme var iframe = document.getElementById('tweet-1758229889595977824-174'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1758229889595977824&theme=dark" }

Introducing the React Compiler

One of the most eagerly anticipated features of React 19 is the introduction of the React Compiler. This powerful tool is designed to address one of the longstanding challenges faced by developers—excessive re-rendering in React applications. React Compiler was first introduced as React Forget at React Conf 2021 as it promised a future of React without memo.

Traditionally, developers have relied on manual memoization techniques such as useMemo and useCallback to mitigate this issue. However, these approaches can often be cumbersome, error-prone, and require additional maintenance.

The React Compiler aims to simplify this process by automatically optimizing code execution while adhering to the core principles of React. By leveraging a sophisticated set of rules that model both the intricacies of JavaScript and the principles of React, the compiler is able to detect and eliminate unnecessary re-renders, resulting in a more efficient and performant application.

The React Compiler simply automates all memoizations in your code.

How the React Compiler Works

At its core, the React Compiler operates by analyzing and optimizing code based on a set of predefined rules. These rules dictate that React components must be idempotent, meaning they return the same output given the same input, and cannot mutate props or state values. By adhering to these rules, the compiler is able to safely optimize code execution without introducing unexpected behavior or breaking existing functionality.

When encountering code that doesn't strictly adhere to React's rules, the compiler takes a cautious approach. Rather than risking potential issues, it will either compile the code where safe to do so or skip compilation altogether if it determines that the code may introduce unintended side effects.

To ensure your code follows React’s rules, the React team recommends enabling Strict Mode and setting up React’s ESLint plugin.

Benefits of the React Compiler

There are many benefits of the React Compiler. It offers developers a host of advantages that can significantly improve their development workflow and application performance. Some of the key benefits include:

Improved Performance: By reducing unnecessary re-renders, the React Compiler improves the overall performance of React applications, resulting in faster load times and smoother user experiences.
Simplified Codebase: Gone are the days of complex memoization techniques and cluttered code. With the React Compiler handling optimizations automatically, developers can focus on writing clean, maintainable code without sacrificing performance.
Enhanced Developer Experience: With performance optimizations taken care of, developers can spend less time worrying about fine-tuning their applications and more time building features and functionality that matter.

Preparing to Use the React Compiler

As we anticipate the new React Compiler, developers can ensure that their code follows React's rules by enabling Strict Mode and configuring React's ESLint plugin. Additionally, the React Compiler has undergone extensive testing on Meta's large and varied codebase, providing developers with confidence in its effectiveness and reliability.

For those eager to see the React Compiler in action, watching this talk from the React team can provide valuable insights into its capabilities and potential impact on application performance.

React 19 Release and Other Features

In addition to the React Compiler, React 19 introduces a slew of other exciting features aimed at enhancing the developer experience and improving application performance. One such feature is Actions, which simplify data handling in client-only applications by allowing developers to pass functions to DOM elements like forms and manage the lifecycle of data submission.

Furthermore, React 19 includes enhancements such as Directives, Document Metadata, and Asset Loading, each designed to streamline the development process and improve application performance across the board. Get more in-depth information on these here.

Conclusion

As the release date for React 19 draws near, excitement continues to build within the developer community. With its promise of exciting new features and performance enhancements, React 19 represents a significant milestone in the evolution of the framework.

Exploring the Top Alternatives to React.js in 2024

Rajae Robinson — Sat, 24 Feb 2024 17:08:58 +0000

Are you considering alternatives to React.js for your next frontend project? While React.js has been a go-to choice for many developers, there are several compelling alternatives worth exploring in 2024. Let's delve into some of the top options:

For detailed explanations, refer to the full article.

Vue.js:

Overview: Vue.js has gained popularity for its simplicity and ease of integration.
Key Features: Two-way data binding, component-based architecture, intuitive template syntax.
Use Cases: Ideal for rapid prototyping and projects of varying scales.

Angular:

Overview: Developed by Google, Angular offers a comprehensive solution for web applications.
Key Features: Complete framework, TypeScript integration, powerful CLI.
Use Cases: Suited for large-scale applications and teams familiar with TypeScript.

Svelte:

Overview: Svelte offers highly optimized and performant applications by shifting the heavy lifting to the build step.
Key Features: Compiles to vanilla JavaScript, automatic code splitting, no virtual DOM.
Use Cases: Perfect for performance-critical applications and beginners learning web development.

Preact:

Overview: Preact is a lightweight alternative to React with a similar API and developer experience.
Key Features: Small size, React compatibility, fast and efficient rendering.
Use Cases: Suitable for performance-centric projects and migration from React.

Solid.js:

Overview: Solid.js focuses on reactivity and performance with fine-grained reactivity.
Key Features: Fine-grained reactivity, JSX syntax, immutable data structures.
Use Cases: Excellent for highly reactive applications and teams preferring React-like syntax.

Inferno.js:

Overview: Inferno.js is a lightweight library with a focus on performance and a React-like API.
Key Features: Highly performant, small-size, component-based architecture.
Use Cases: Ideal for performance-centric applications and migration from React.

In conclusion, while React.js remains popular, it's good to explore alternative frameworks and libraries to find the best fit for your project. What are your thoughts on React and which Javascript framework do you prefer?

Pagination in React.js (React Query included)

Rajae Robinson — Fri, 09 Feb 2024 01:26:00 +0000

Pagination is a vital component in web development, particularly when handling extensive datasets. In React.js, efficient pagination implementation significantly enhances user experience. This article delves into various methods of setting up pagination in React.js, including leveraging React Query for optimal performance.

Understanding Pagination

Pagination divides large datasets into smaller, manageable pages, improving both navigation and application performance by loading only necessary data chunks.

Why Pagination Matters

Pagination is pivotal for:

Improved Performance: Reduces initial load time by loading only required data.
Enhanced Usability: Facilitates easy navigation through pages.
Better Organization: Organizes content into manageable pages, ideal for large content sets like blogs or product listings.

Implementing Basic Pagination in React

React doesn't offer built-in pagination, but implementing a basic system is straightforward. Maintain page and items per page in component state and slice data array accordingly.

// Basic Pagination in React
import React, { useState } from 'react';

const MyComponent = ({ data, itemsPerPage }) => {
 const [currentPage, setCurrentPage] = useState(1);
 const startIndex = (currentPage - 1) * itemsPerPage;
 const endIndex = startIndex + itemsPerPage;
 const currentData = data.slice(startIndex, endIndex);

 return (
   <div>
     {/* Render your component with currentData */}
{/* some list or grid view here */}
     <div>
       {/* Pagination UI */}
       <button onClick={() => setCurrentPage(currentPage - 1)} disabled={currentPage === 1}>
         Previous
       </button>
       <span>{currentPage}</span>
       <button onClick={() => setCurrentPage(currentPage + 1)} disabled={endIndex >= data.length}>
         Next
       </button>
     </div>
   </div>
 );
};

export default MyComponent;

Customizing Pagination UI

Refactor pagination UI elements into separate components or utilize external libraries for pre-built UI components with page numbers.

// Custom React Pagination Component with Numbers
import React from 'react';

const Pagination = ({ totalItems, itemsPerPage, currentPage, onPageChange }) => {
 const totalPages = Math.ceil(totalItems / itemsPerPage);
 const pageNumbers = Array.from({ length: totalPages }, (_, index) => index + 1);

 return (
   <div>
     <ul className="pagination">
       {pageNumbers.map((number) => (
         <li key={number} className={number === currentPage ? 'active' : ''}>
           <button onClick={() => onPageChange(number)}>{number}</button>
         </li>
       ))}
     </ul>
   </div>
 );
};

export default Pagination;

Refer to full article for more code snippets.

Utilizing React Query for Advanced Pagination

React Query simplifies data fetching, caching, and state management, ideal for handling paginated data. Set up React Query, fetch paginated data, and utilize prefetching for seamless pagination.

// Using React Query for Pagination
import React, { useState, useEffect } from 'react';
import { useQuery, QueryClient, useQueryClient, keepPreviousData } from '@tanstack/react-query';

const fetchData = async (page = 0) => {
 const response = await fetch(`https://api.example.com/data?page=${page}`);
 return response.json();
};

const MyComponent = () => {
 const queryClient = useQueryClient();
 const [page, setPage] = useState(0);

 const { data, isPending, isError, isPlaceholderData, isFetching } = useQuery({
   queryKey: ['myData', page], 
   queryFn: () => fetchData(page), 
   placeholderData: keepPreviousData,
   staleTime: 5000, // how often the data should automatically be refetched
 });

 useEffect(() => {
   if (!isPlaceholderData && data?.hasMore) {
     queryClient.prefetchQuery({
       queryKey: ['myData', page + 1],
       queryFn: () => fetchData(page + 1),
     });
   }
 }, [data, isPlaceholderData, page, queryClient]);

 if (isPending) return <div>Loading...</div>;
 if (isError) return <div>Error fetching data</div>;

 return (
   <div>
     {/* Render your component with data */}
     {/* some list or grid view here */}
     <div>
       {/* Pagination UI */}
       <button onClick={() => setPage((old) => Math.max(old - 1, 0))} disabled={page === 0}>
         Previous
       </button>
       <span>Current Page: {page + 1}</span>
       <button onClick={() => {
         setPage((old) => (data?.hasMore ? old + 1 : old));
       }} 
       // Disable the next button until next page is available or there is no more data
       disabled={isPlaceholderData || !data?.hasMore}>
         Next
       </button>
       {isFetching ? <span> Loading...</span> : null}
     </div>
   </div>
 );
};

export default MyComponent;

Exploring React Pagination Packages

Leverage React pagination packages like react-paginate or react-js-pagination for simplified pagination implementation. Additionally, consider UI libraries like Material-UI for pre-built components.

For detailed explanations and additional code snippets, refer to the full article.

Author: Rajae Robinson

Understanding Hydration in Next.js

Rajae Robinson — Tue, 06 Feb 2024 12:37:31 +0000

Next.js is renowned for its robust capabilities in constructing server-side rendered (SSR) and statically generated (SSG) React applications. Central to Next.js's optimization strategies and seamless user experiences is a concept called "hydration."

What is Hydration?

Hydration is the process of transforming pre-rendered server-side content into an interactive user interface on the client side. When a user accesses a pre-rendered page, Next.js promptly sends the fully rendered HTML content to the client's browser, complete with initial data and UI from the server. Then, client-side JavaScript "hydrates" this static content, imbuing it with interactivity to form a fully functional React application.

In contrast to traditional client-side rendered (CSR) React apps, where the browser retrieves an empty HTML page followed by fetching JavaScript bundles for rendering and data acquisition, Next.js's hydration process significantly mitigates initial loading delays.

How does Hydration Work?

Understanding how hydration operates in Next.js involves delineating its sequential steps:

Server-Side Rendering (SSR): Next.js renders React components on the server in response to user requests, incorporating available data at that instance. This yields a fully rendered HTML page inclusive of server-derived state and data.
Send HTML to the Client: Next.js transmits this fully rendered HTML page to the client's browser as the primary response. The HTML content encapsulates the static representation of the page.
Execution of Client-Side JavaScript: Upon receiving the HTML, the client's browser commences executing the JavaScript bundles embedded within the page. These bundles reconstruct React components on the client side utilizing the same virtual DOM employed on the server.
Comparison and Reconciliation: During rehydration, React on the client compares the server-rendered virtual DOM with its client-side counterpart, a process termed "reconciliation." React then synchronizes the client-side virtual DOM with its server-rendered counterpart.
Event Handling and Interactivity: Following completion of the rehydration process, React components on the client side attain full interactivity, facilitating seamless event handling and state transitions akin to CSR React apps.

Advantages of Hydration

Hydration in Next.js yields several instrumental advantages:

Accelerated Time to Interactive (TTI): By curtailing the Time to Interactive (TTI), hydration substantially speeds up page interactivity and responsiveness. Users can promptly engage with content upon receiving pre-rendered HTML, circumventing delays associated with JavaScript bundle loading.
Enhanced SEO and Accessibility: Next.js's support for SSR and SSG bolsters SEO and accessibility by enabling direct access to fully rendered HTML content, thereby enhancing crawlability for search engines and improving accessibility for users with disabilities.
Augmented Performance and User Experience: Hydration fosters improved performance through expedited loading times and seamless interactivity, culminating in superior user experiences and heightened engagement.
Graceful Degradation: In scenarios where JavaScript fails to load or execute, Next.js gracefully reverts to server-rendered content, ensuring uninterrupted accessibility and navigation for users.
Client-Side Optimizations: Despite initial server-side rendering, Next.js incorporates client-side JavaScript bundles to facilitate dynamic updates, code splitting, and other client-side rendering optimizations post-hydration.

To learn more, visit the original article.

Upgrading to Next.js 14

Rajae Robinson — Sun, 04 Feb 2024 00:46:55 +0000

About a year after the release of Next.js version 13, the Vercel team has introduced version 14. You might be wondering, 'What new APIs or features will I have to learn?' The answer is none. No new APIs were introduced. Instead, Next.js was enhanced to be better and faster. In this article, we will explore whether upgrading to Next.js 14 is worth it.

Step-by-Step: Upgrading from Next.js 13 to 14

Step 1: Update Node Version

Before upgrading to Next.js 14, ensure that you are using Node version 18.7 or higher. You can check your current node version by executing the following command in the terminal:

node --version

If your version is older than 18.7, you can use Node Version Manager (NVM) to install the latest version. Once installed, download the latest version of Node using:

nvm install node

Step 2: Upgrade to Next.js 14

Assuming you are using npm as your package manager, you may use the following command to upgrade to the latest version of Next.js:

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

If you are using TypeScript, don't forget to upgrade the corresponding type definitions:

npm i @types/react@latest @types/react-dom@latest

Step 3: Fix the Breaking Changes

After upgrading, it's time to address any breaking changes. Run your project and take note of the errors that appear. They will likely be associated with the breaking changes introduced in Next.js 14, as covered in the previous section. For upgrading, there are codemods available that will automatically update your codebase.

Bonus: Partial Prerendering (Preview)

One of the exciting additions in Next.js 14 is the prospect of Partial Prerendering. It introduces a blend of static initial responses and streaming dynamic content without requiring the need to learn a new API. Partial Prerendering leverages React Suspense.

As of the time of writing this article, Partial prerendering is under active development.

Let’s delve intoa snippet showcasing how Partial Prerendering operates within a Next.js project:

// app/page.tsx
export default function Page() {
 return (
   <main>
     <header>
       <h1>My Store</h1>
       <Suspense fallback={<CartSkeleton />}>
         <ShoppingCart />
       </Suspense>
     </header>
     <Banner />
     <Suspense fallback={<ProductListSkeleton />}>
       <Recommendations />
     </Suspense>
     <NewProducts />
   </main>
 );
}

By defining Suspense boundaries, the page generates a static shell during the initial load based on these boundaries. The React Suspense fallbacks are prerendered within this shell.

Final Thoughts

Web development evolves constantly, with each upgrade unlocking new possibilities. Next.js 14 offers turbocharged performance, simplified backend actions, and a peek into future rendering. However, upgrading should align with your project's unique needs and growth plans. It is not mandatory to upgrade immediately, but exploring the advancements and potential benefits that Next.js 14 offers for your specific project's needs and future growth is highly recommended. For more details, refer to the complete blog post on BlueSockets.

React.js Vitest Unit Testing (Husky, lint-staged, ESLint, Prettier)

Rajae Robinson — Sun, 04 Feb 2024 00:43:30 +0000

Creating a React application with Vite has become the preferred way over using create-react-app due to its faster and simpler development environment. However, unlike create-react-app, Vite doesn't come with the necessary packages for unit testing React applications out of the box.

In this guide, we will walk through setting up unit testing for a production-ready React + Typescript Vite application. We'll use the lightweight and fast Vitest testing framework along with the React Testing Library. Additionally, we'll configure linting and formatting using ESLint and Prettier to catch issues early. Lastly, we'll implement Husky and lint-staged to automatically run tests and linting on git commits before code is pushed. By the end, you'll have a robust testing setup to catch bugs, prevent regressions, and maintain code quality standards.

Assuming you already have your React Vite project set up (using npm create vite@latest), the first step is to install Vitest:

npm install -D vitest

Then, update your package.json file with a test script:

"scripts": {
  "test": "vitest"
}

Now, you can write your first test file, for example, src/components/Example/Example.test.ts:

import { describe, expect, it } from 'vitest';

describe('Example', () => {
 it('adds 1 + 2 to equal 3', () => {
   expect(1 + 2).toBe(3);
 });
});

Run the tests with:

npm run test

Vitest will automatically detect and run the tests, providing a fast and straightforward starting point for testing React applications.

Setting up Vitest with React Testing Library

To test the UI of your React components, you need to interact with the DOM. Here, React Testing Library comes into play. Install the required packages:

npm i -D jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event

Update your Vite configuration file (vite.config.ts):

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/test/setup.ts',
    css: true,
  },
});

Create the setup file specified in the configuration (src/test/setup.ts):

import '@testing-library/jest-dom';

Now, you can test the UI of your React application. For example:

import { test } from 'vitest';
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders welcome message', () => {
 render(<App />);
 expect(screen.getByText('Learn React')).toBeInTheDocument();
});

Creating a Custom Render for App Providers

If your React application uses the Context API and relies on providers, it's efficient to create a custom render function with the necessary providers. Create a file utils/test-utils.tsx:

import { cleanup, render } from '@testing-library/react';
import { afterEach } from 'vitest';

afterEach(() => {
 cleanup();
});

const AppProviders = ({ children }: { children: React.ReactNode }) => {
 return (
   <ThemeProvider theme="light">
     {children}
   </ThemeProvider>
 );
}

function customRender(ui: React.ReactElement, options = {}) {
 return render(ui, {
   wrapper: AppProviders,
   ...options,
 });
}

export * from '@testing-library/react';
export { default as userEvent } from '@testing-library/user-event';
export { customRender as render };

Now, use this custom render function in your tests when necessary.

Configuring ESLint and Prettier

For maintaining code quality and consistency, use ESLint for linting and Prettier for formatting. If not already installed, add the necessary packages:

npm install eslint-plugin-react --save-dev
npm install --save-dev --save-exact prettier
npm install -D eslint-config-prettier

Update your ESLint config file:

module.exports = {
 extends: [
   'eslint:recommended',
   'plugin:@typescript-eslint/recommended',
   'plugin:react-hooks/recommended',
   'plugin:react/recommended',
   'plugin:react/jsx-runtime',
   'eslint-config-prettier',
 ],
 //...
};

Create a Prettier configuration file (.prettierrc):

{
 "semi": true,
 "singleQuote": true
}

Now, ESLint, Prettier, and tests will automatically run before any commits, ensuring code quality and consistency.

Setting Up Husky and lint-staged

To automate ESLint, Prettier, and testing on commits, use Husky and lint-staged. Install them:

npm install --save-dev husky lint-staged
npx husky install
npx husky add .husky/pre-commit "npx lint-staged"

Update your package.json with lint-staged configurations:

{
 "scripts": {
   "test:staged": "vitest --run"
 },
 "lint-staged": {
   "**/*.{js,jsx,ts,tsx}": [
     "npm run lint",
     "prettier --write --ignore-unknown",
     "npm run test:staged"
   ]
 }
}

Now, ESLint, Prettier, and tests will run automatically before commits, ensuring that issues are caught early.

Conclusion

Setting up Vitest, ESLint, Prettier, Husky, and lint-staged provides a solid foundation for unit testing React apps. For more details, refer to the complete blog post on BlueSockets.

A Simple Guide on Migrating to React Query v5

Rajae Robinson — Sun, 04 Feb 2024 00:34:34 +0000

Introduction:
React Query has revolutionized server-state management in React applications, and the recent release of version 5 takes it a step further with enhanced power and user-friendliness. If you're contemplating migrating from React Query v4 to v5, you've come to the right place. This guide will lead you through the process, detailing key changes and offering code snippets for a seamless transition.

Introduction to React Query v5:
React Query v5 introduces exciting features and improvements, focusing on API streamlining and enhanced usability. Some highlights include:

Simplified Optimistic Updates
Infinite Queries with maxPages
Infinite Queries Prefetch Multiple Pages
Fine-Grained Storage Persister
Typesafe Query Options
New Hooks for Suspense

While these additions make v5 an enticing upgrade, it's crucial to be aware of the breaking changes.

Breaking Changes:

Hooks now have a Single Signature
Callbacks on useQuery Removed
RefetchInterval Callback Function Change

These changes simplify the interaction with queries, offering a more consistent API. Review the complete list of breaking changes in the official migration guide.

Migrating to React Query v5: A Step-by-Step Guide:
Now, let's navigate the migration process step by step, providing code snippets for a smooth transition.

Step 1: Install React Query v5
Assuming npm usage, install the latest version of React Query (v5.18.1 at the time of writing) with the command:

npm i @tanstack/react-query@latest

Optional: For the updated React Query DevTools, use:

npm i @tanstack/react-query-devtools@latest

Step 2: Fix Breaking Changes
Manually address breaking changes or use the provided codemod for an automated update. Remember to run prettier and eslint for consistent code formatting.

New Features in v5:
Now that you've upgraded to v5 and addressed breaking changes, explore some new features:

Simplified Optimistic Updates
Infinite Queries with maxPages
Infinite Queries Prefetch Multiple Pages
New Hooks for Suspense

Conclusion:
Migrating to React Query v5 unlocks a world of possibilities, streamlining development. Despite breaking changes, the benefits outweigh the effort. Take your time, consult the migration guide, and use the codemod for a smoother process.

For more details, refer to the complete blog post on BlueSockets.

How to Optimize Performance with Dynamic Imports in Next.js

Rajae Robinson — Tue, 24 Oct 2023 15:42:21 +0000

Dynamic imports in Next.js allow you to load JavaScript modules only when they are needed, rather than loading them all at once when the page is initially loaded. This can significantly improve the performance of your web application by reducing the initial bundle size and loading only the necessary code when a user interacts with your application.

Let's create a page called DynamicPage to demonstrate how to use dynamic imports in Next.js

// pages/dynamic.js
import React from 'react';

function DynamicPage() {
  return (
    <div>
      <h1>Dynamic Imports in Next.js</h1>
    </div>
  );
}

export default DynamicPage;

Using Dynamic Imports to Lazy Load a Component

Now, let's use dynamic imports to load a component only when it's needed. Suppose you have a component named LazyComponent that you want to load dynamically. Here's how you can do it:

// pages/dynamic.js
import React, { useState } from 'react';
import dynamic from 'next/dynamic';

// component is dynamically loaded without SSR
const LazyComponent = dynamic(() => import('../components/LazyComponent'), {
  ssr: false,
});

function DynamicPage() {
  const [showLazyComponent, setShowLazyComponent] = useState(false);

  return (
    <div>
      <h1>Dynamic Imports in Next.js</h1>
      <button onClick={() => setShowLazyComponent(true)}>Load Lazy Component</button>
      {showLazyComponent && <LazyComponent />}
    </div>
  );
}

export default DynamicPage;

In this example, we use the dynamic() function to load the LazyComponent module when the "Load Lazy Component" button is clicked.

Why Use Dynamic Imports in Next.js?

Here are some key benefits of using dynamic imports:

Code Splitting: It helps break down your JavaScript into smaller chunks, optimizing the initial page load time.
Faster Page Loads: By loading code only when necessary, you reduce the initial bundle size, resulting in quicker page loads.
Improved Performance: Less JavaScript to parse and execute leads to smoother interactions and faster rendering times.
Better SEO: Faster-loading pages can positively impact your site's visibility in search results.
Reduced Initial Payload: Especially important for users with slower internet connections or less powerful devices.

How to Optimize Performance with Dynamic Imports in Next.js – BlueSockets

Next.js is a popular React framework for building web applications. It provides a powerful toolset for creating fast and efficient web applications. One of Next.js's…

bluesockets.com

Orginially published on bluesockets.com.

Is Next.js Frontend or Backend?

Rajae Robinson — Sun, 22 Oct 2023 14:03:16 +0000

Next.js is a React framework designed to simplify the development of server-rendered React applications. It combines the power of React with server-side rendering capabilities, resulting in fast-loading, SEO-friendly web applications.

There is a clear distinction between frontend and backend development. The frontend is what users directly interact with, while the backend handles operations behind the scenes. Next.js, however, blurs these lines by operating in both domains.

In the frontend aspect, Next.js behaves like any other React framework. It allows you to build reusable components, manage state, and handle user interactions seamlessly.

On the backend side, Next.js interacts closely with backend functionalities. It enables you to fetch data from APIs, connect to databases, and perform server-side computations during the rendering process.

I spoke more about this in an article I wrote recently. The article also touches on Next.js' file-based routing system and dynamic pages which provides a clear and intuitive approach to route management.

If you're interested in learning more about how Next.js bridges the gap between frontend and backend development, check out the full article here. It's a great read for anyone looking to enhance their web development skills with Next.js.

What are your thoughts? Is Next.js a Frontend or Backend framework or is it both?

When To Use Enum in TypeScript

Rajae Robinson — Sat, 21 Oct 2023 00:07:48 +0000

Hey everyone,

I wrote an insightful article on when and how to use Enums in TypeScript.

Enums in TypeScript allow us to define a set of named constants. They are essentially a way to give more friendly names to sets of numeric values. Enums can be defined using the enum keyword.

I provide some great scenarios where Enums can be exceptionally useful:

1.Representing States - Enums are handy for representing different states in your application. For example, if you're working on a game, you might have states like Loading, Playing, Paused, and GameOver.

   enum GameState { 
       Loading, 
       Playing, 
       Paused, 
       GameOver 
   }

2.Days of the Week - When working with days of the week, Enums can make your code more intuitive.

   enum DayOfWeek { 
       Sunday, 
       Monday, 
       Tuesday, 
       Wednesday, 
       Thursday, 
       Friday, 
       Saturday 
   }

3.Error Codes - Enums can be perfect for handling error codes or statuses.

   enum ErrorCode { 
       NotFound = 404, 
       Unauthorized = 401, 
       InternalServerError = 500, 
       BadRequest = 400 
   }

4.User Roles - Enums can define user roles in an application, which helps control access levels and permissions.

   enum UserRole { 
       Admin, 
       Moderator, 
       User, 
       Guest 
   }

5.Configuration Flags - If your application has various configuration options, Enums can be used to represent them.

   enum Configuration { 
       ShowHeader = 1, 
       ShowFooter = 2, 
       ShowSidebar = 4, 
       DarkMode = 8 
   }

The article also discusses the advantages of using Enums, including improved readability, maintainability, type safety, and intellisense support. It's definitely worth a read!

For more detailed explanations and code examples, you can check out the full article here.

When to Use Interface vs. Class in TypeScript

Rajae Robinson — Thu, 19 Oct 2023 02:03:29 +0000

Hey fellow TS Devs!

I wrote an insightful article on when to use interfaces and classes in TypeScript. It's a crucial decision we often face, and this article breaks it down nicely.

Understanding Interfaces:
Interfaces are like contracts for objects, defining their structure and behavior. They ensure consistency in your codebase. Here's an example:

interface Person {
  firstName: string;
  lastName: string;
  age: number;
}

Use Cases for Interfaces:

Defining Object Shapes: When you need specific properties and their types, interfaces got your back.
Implementing Contracts: Great for enforcing rules and common functionality across classes.
Extending Interfaces: You can build specialized interfaces by extending existing ones.

Exploring Classes:
Classes are fundamental to object-oriented programming. They encapsulate data and behavior in one unit.

Use Cases for Classes:
1.Creating Instances: If you need multiple instances of something (like users in a system), classes are your go-to.

class User {
  username: string;
  password: string;

  constructor(username: string, password: string) {
    this.username = username;
    this.password = password;
  }

  login() {
    // Logic for user login
  }
}

2.Inheritance and Polymorphism: Classes help build hierarchies with shared characteristics.

class Animal {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  makeSound() {
    // Default sound
  }
}

class Dog extends Animal {
  makeSound() {
    return 'Bark!';
  }
}

class Cat extends Animal {
  makeSound() {
    return 'Meow!';
  }
}

3.Encapsulation: Secure and maintainable code by controlling access to properties and methods.

class BankAccount {
  private balance: number = 0;

  deposit(amount: number) {
    this.balance += amount;
  }

  withdraw(amount: number) {
    if (amount <= this.balance) {
      this.balance -= amount;
    } else {
      console.log('Insufficient funds');
    }
  }
}

Choosing between an Interface and a Class:
It all depends on the problem at hand. Often, they complement each other. Interfaces define shapes, while classes provide instantiable blueprints with behavior.

If you want to dive deeper, check out the full article. It's a great read for writing more maintainable, scalable, and readable code in TypeScript.

Happy coding! 🚀

Simple Guide to React Hooks

Rajae Robinson — Mon, 16 Oct 2023 21:45:07 +0000

Hey everyone,

The following is a only summary of the article "Introduction to React Hooks" from bluesockets.com. Go to post

React Hooks have revolutionized the way we write functional components in React. They provide a simpler and more concise way of managing state and side effects, making our code easier to understand, test, and maintain.

Rules of React Hooks:

Only call hooks at the top level: Hooks should be called directly inside functional components or custom hooks, but not inside loops, conditions, or nested functions.
Call hooks in the same order every time: The order in which hooks are called should remain consistent across renders of the component. This helps React keep track of the state associated with each hook correctly.
Only call hooks from React functions: Hooks should only be called from within React components or custom hooks. Don't call hooks from regular JavaScript functions.

Commonly Used React Hooks:

useState

The useState hook is used to add state to functional components.

import React, { useState } from 'react';

function Counter() {
 const [count, setCount] = useState(0);

 return (
   <div>
     <p>Count: {count}</p>
     <button onClick={() => setCount(prevCount => prevCount + 1)}>Increment</button>
   </div>
 );
}

useEffect

The useEffect hook allows us to perform side effects in functional components. It takes a function as its first argument, which will be executed after the component renders.

import React, { useState, useEffect } from 'react';

function Timer() {
 const [seconds, setSeconds] = useState(0);

 useEffect(() => {
   const interval = setInterval(() => {
     setSeconds(prevSeconds => prevSeconds + 1);
   }, 1000);

   return () => {
     clearInterval(interval);
   };
 }, []);

 return (
   <div>
     <p>Seconds: {seconds}</p>
   </div>
 );
}

useContext

The useContext hook is used to consume values from the React context. It accepts a context object created by React.createContext and returns the current context value.

import React, { createContext, useContext } from 'react';

const MyContext = createContext();

function MyProvider({ children }) {
 const sharedData = 'Hello from context!';

 return (
   <MyContext.Provider value={sharedData}>
     {children}
   </MyContext.Provider>
 );
}

function MyConsumer() {
 const sharedData = useContext(MyContext);

 return <p>{sharedData}</p>;
}

function App() {
 return (
   <MyProvider>
     <div>
       <h1>My App</h1>
       <MyConsumer />
     </div>
   </MyProvider>
 );
}

useRef

The useRef hook returns a mutable ref object whose .current property can be used to store a value. It allows us to access and manipulate the underlying DOM or React element.

import React, { useRef } from 'react';

function TextInput() {
 const inputRef = useRef(null);

 const focusInput = () => {
   inputRef.current.focus();
 };

 return (
   <div>
     <input type="text" ref={inputRef} />
     <button onClick={focusInput}>Focus Input</button>
   </div>
 );
}

The article also covers creating custom hooks which is a must know if want to create clean React code.

By understanding and using hooks effectively, developers can build cleaner, more maintainable React applications.

Of course, this post did not cover every React Hook, but the ones covered are most certainly the ones you will commonly see and use.

Feel free to ask any questions or share your experiences with React Hooks!