Forem: Ibrahem ahmad

# Key New Features in React Router 7: Embracing the Remix Future

Ibrahem ahmad — Sun, 22 Dec 2024 10:13:41 +0000

React Router 7 represents a significant evolution in the React routing ecosystem. It incorporates powerful features from Remix and introduces essential improvements. This article explores the core changes and demonstrates their practical applications.

Enhanced Data Loading with Deferred Components

React Router 7 brings a more advanced and efficient method for data loading with deferred components, allowing applications to stream data progressively:

import { defer, useLoaderData, Await } from 'react-router';
import { Suspense } from 'react';

interface ProductData {
  id: string;
  name: string;
  details: {
    description: string;
    price: number;
  };
}

async function loader({ params }: { params: { id: string } }) {
  return defer({
    product: fetchProduct(params.id),
    recommendations: fetchRecommendations(params.id)
  });
}

function ProductPage() {
  const { product, recommendations } = useLoaderData<typeof loader>();

  return (
    <div>
      <Suspense fallback={<ProductSkeleton />}>
        <Await resolve={product}>
          {(resolvedProduct: ProductData) => (
            <ProductDetails product={resolvedProduct} />
          )}
        </Await>
      </Suspense>

      <Suspense fallback={<RecommendationsSkeleton />}>
        <Await resolve={recommendations}>
          {(resolvedRecommendations) => (
            <RecommendationsList items={resolvedRecommendations} />
          )}
        </Await>
      </Suspense>
    </div>
  );
}

Server-Side Rendering Optimizations

The framework now includes built-in server-side rendering optimizations, particularly beneficial for large applications:

import { createStaticHandler, createStaticRouter } from '@react-router/core';
import type { ServerResponse } from 'http';

interface AppContext {
  req: Request;
  res: ServerResponse;
}

async function handleRequest(context: AppContext) {
  const handler = createStaticHandler(routes);
  const response = await handler.query(
    new Request(context.req.url, {
      method: context.req.method,
      headers: context.req.headers,
    })
  );

  return response;
}

const router = createStaticRouter(routes, {
  basename: '/app',
  hydrationData: {
    loaderData: initialData,
  },
});

Enhanced Type Safety with TypeScript

React Router 7 emphasizes improved TypeScript integration:

import { type LoaderFunctionArgs, json } from '@remix-run/router';

interface UserData {
  id: string;
  name: string;
  email: string;
}

interface LoaderError {
  message: string;
  code: number;
}

async function loader({ 
  params,
  request 
}: LoaderFunctionArgs): Promise<Response> {
  try {
    const userData: UserData = await fetchUser(params.userId);
    return json(userData);
  } catch (error) {
    const errorData: LoaderError = {
      message: 'Failed to fetch user',
      code: 404
    };
    return json(errorData, { status: 404 });
  }
}

Client-Side Data Mutations

The framework introduces a more streamlined approach to handling client-side mutations, it is just like a loader but this time you will be able to submit a form or do any actions:

import { useFetcher } from 'react-router';

interface CommentData {
  id: string;
  content: string;
  userId: string;
}

function CommentForm() {
  const fetcher = useFetcher();

  const isSubmitting = fetcher.state === 'submitting';

  return (
    <fetcher.Form method="post" action="/comments">
      <textarea name="content" required />
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Posting...' : 'Post Comment'}
      </button>
    </fetcher.Form>
  );
}

async function action({ request }: { request: Request }) {
  const formData = await request.formData();
  const comment: Partial<CommentData> = {
    content: formData.get('content') as string,
    userId: getCurrentUserId()
  };

  const newComment = await saveComment(comment);
  return json(newComment);
}

Performance Improvements

React Router 7 introduces significant performance optimizations through enhanced route prefetching:

function Navigation() {
  return (
    <nav>
      <PrefetchPageLinks page="/dashboard" />
      <Link 
        to="/dashboard" 
        prefetch="intent"
        unstable_viewTransition
      >
        Dashboard
      </Link>
    </nav>
  );
}

SPA mode

you will be able to turn on or off the SPA mode

//react-router.config.ts
import { type Config } from "@react-router/dev/config";

export default {
  ssr: false,
} satisfies Config;

Here is how to bring All Remix feature to your React

To get these features working with Vite, you'll need this configuration:

// vite.config.ts
-import { vitePlugin as remix } from "@remix-run/dev";
+import { reactRouter } from "@react-router/dev/vite";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

 export default defineConfig({
      plugins: [
       - remix(), // remove remix
       + reactRouter(), // add reactRouter instead
       tsconfigPaths(), 
       ],
});

Note: For those upgrades from react-router v.6 you will use react-router instead of react in vite.

This setup gives you access to Remix-like features such as:

Data loading and mutations
Nested layouts
Error boundaries
Progressive enhancement
Form handling
Type safety
Server-side rendering capabilities
Optimistic UI updates

The combination of React Router 7 and Vite provides a powerful development environment that brings many of Remix's innovative features to any React application, while maintaining the flexibility to choose your preferred tooling and deployment strategy, This convergence promises:

Improved developer experience through consolidated APIs
Enhanced performance optimizations
Better integration with modern React features
Streamlined migration paths between platforms For developers interested in diving deeper into these changes, consider exploring:

SOLID Principles: Building Maintainable Applications

Ibrahem ahmad — Mon, 02 Dec 2024 09:31:22 +0000

Introduction

SOLID principles are important in React projects, helping create more maintainable, scalable, and readable component-based applications.
Let's see how these principles apply to React with some practical examples.

1. Single Responsibility Principle (SRP)

Every class or function should do one thing and do it well, focusing on a single responsibility.

Real-life Example

💡 A chef shouldn't be responsible for cooking, cleaning, and managing the restaurant. Each task should be assigned to a specific person or team.

Code Example

// Bad Example (Violating SRP)
// Colocation

 const UserCard: React.FC = () => {
    // Multiple responsibilities:
    // 1. Making API call
    // 2. Handling UI updates
  const [user, setUser] = React.useState({ name: '', age: 0 });
  React.useEffect(() => {
    fetch('/api/user')
      .then((res) => res.json())
      .then((data) => setUser(data));
  }, []);

  return <div>{user.name} is {user.age} years old.</div>;
};

// Good Example (Following SRP)
// Separate concerns into different modules

type UserType={ name: string; age: number }

const UserCard: React.FC<{ user: UserType}> = ({ user }) => {
  return <div>{user.name} is {user.age} years old.</div>;
};

const fetchUser = async (): Promise<UserType> => {
  const response = await fetch('/api/user');
  return response.json();
};

// Usage
const App: React.FC = () => {
  const [user, setUser] = React.useState<UserType | null>(null);

  React.useEffect(() => {
    // This is a mock example, not the exact code.
    fetchUser().then(setUser);
  }, []);

  return user ? <UserCard user={user} /> : <div>Loading...</div>;
};

2. Open/Closed Principle (OCP)

Components should be open for extension but closed for modification.

Real-life Example

💡 You can add new apps to your phone without changing the phone's core functionality.

Code Example

// Bad Example (Violating OCP)
type NotificationType = 'email' | 'message' | 'alert';

interface NotificationBadgeProps {
  type: NotificationType;
  count: number;
}

const NotificationBadge: React.FC<NotificationBadgeProps> = ({ type, count }) => {
  if (type === 'email') {
    return <div className="email-badge">{count} Emails</div>;
  } else if (type === 'message') {
    return <div className="message-badge">{count} Messages</div>;
  } else if (type === 'alert') {
    return <div className="alert-badge">{count} Alerts</div>;
  }
  return null;
};

// Good Example (Following OCP)
interface BadgeConfig {
  className: string;
  label: string;
}

const badgeStyles: Record<string, BadgeConfig> = {
  email: { 
    className: 'email-badge',
    label: 'Emails'
  },
  message: {
    className: 'message-badge',
    label: 'Messages'
  },
  alert: {
    className: 'alert-badge',
    label: 'Alerts'
  }
};

interface ExtendedNotificationBadgeProps {
  type: string;
  count: number;
}

const NotificationBadge: React.FC<ExtendedNotificationBadgeProps> = ({ type, count }) => {
  const config = badgeStyles[type];

  if (!config) return null;

  return (
    <div className={config.className}>
      {count} {config.label}
    </div>
  );
};

// Here is an example of extending without modifying existing code
const extendedBadgeStyles = {
  ...badgeStyles,
  social: {
    className: 'social-badge',
    label: 'Social'
  }
};

3. Liskov Substitution Principle (LSP)

Subcomponents should work seamlessly when substituted for their parent.

Note: Liskov substitution was introduced by Barbara Liskov in 1987.

Real-life Example

💡 Imagine a toy car. If someone swaps it for a remote-controlled car, it should still work as expected when you push it.

Code Example

// Bad Example (Violating LSP)
const Input: React.FC<{ type: 'text' | 'number' }> = ({ type }) => {
  if (type === 'number') {
    return <input type="number" />;
  }
  return <input type="text" />;
};


// Good Example (Following LSP)
const TextInput: React.FC = () => <input type="text" />;
const NumberInput: React.FC = () => <input type="number" />;

const FormField: React.FC<{ label: string; children: React.ReactNode }> = ({ label, children }) => (
  <div>
    <label>{label}</label>
    // you will be able to send any children.
    {children}
  </div>
);

// Usage
const App: React.FC = () => (
  <FormField label="Age">
    <NumberInput />
  </FormField>
);

4. Interface Segregation Principle (ISP)

Don’t force components to implement props or methods they don’t use.

Real-life Example

💡 Think of a menu in a restaurant. If you’re ordering pizza, you shouldn’t have to look at sushi options unless you want to.

Code Example

Split large interfaces into smaller, focused ones.


// Types for User-related operations
interface User {
  id: number;
  name: string;
  email: string;
}

type FetchState<T> = {
  data: T | null;
  loading: boolean;
  error: Error | null;
};

// Bad Example (Violating ISP)
 interface UserProps {
  name: string;
  age: number;
  onClick: () => void;
}

const UserCard: React.FC<UserProps> = ({ name, age, onClick }) => (
  <div onClick={onClick}>
    {name} is {age} years old.
  </div>
);


// Good Example (Following ISP) first.
 interface UserInfoProps {
  name: string;
  age: number;
}

interface ClickableProps {
  onClick: () => void;
}

const UserInfo: React.FC<UserInfoProps> = ({ name, age }) => (
  <div>{name} is {age} years old.</div>
);

const Clickable: React.FC<ClickableProps & { children: React.ReactNode }> = ({ onClick, children }) => (
  <div onClick={onClick}>{children}</div>
);

// Usage
const App: React.FC = () => (
  <Clickable onClick={() => alert('Clicked!')}>
    <UserInfo name="John" age={30} />
  </Clickable>
);

Or

interface UserProps {
  name: string;
  age: number;
 // so no more required to add Click handling.
 onClick?: () => void;
}
const UserCard: React.FC<UserProps> = ({ name, age, onClick }) => (
  <div onClick={onClick}>
    {name} is {age} years old.
  </div>
);

5. Dependency Inversion Principle (DIP)

High-level components should depend on abstractions, not details.

Real-life Example

💡 Think of a lamp. The switch shouldn’t care if the lamp is LED or fluorescent. It just needs to know it’s a light source.

Code Example 1

and also you can use hooks or context to abstract dependencies.

Example

//Bad Example of (DIP)
const ThemeButton: React.FC = () => {
  const theme = 'dark';
  return <button className={theme === 'dark' ? 'btn-dark' : 'btn-light'}>Click me</button>;
};

// Good Example of (DIP)
const useTheme = () => React.useContext(ThemeContext);

const ThemeButton: React.FC = () => {
  const theme = useTheme();
  return <button className={theme === 'dark' ? 'btn-dark' : 'btn-light'}>Click me</button>;
};

// Context provider
const ThemeContext = React.createContext('light');
const App: React.FC = () => (
  <ThemeContext.Provider value="dark">
    <ThemeButton />
  </ThemeContext.Provider>
);

Conclusion

Applying SOLID principles in React with TypeScript helps create more:

Type-safe components
Maintainable and predictable code
Easily testable implementations
Flexible and extensible applications

Pro Tip: Use TypeScript's type system to enforce these principles. Interfaces and generics can help create more robust and flexible code structures.

Remember, these principles are guidelines. Apply them thoughtfully, balancing between over-engineering and keeping your code clean and understandable.

Thanks For Reading.

What happens when you add one element into start of array?

Ibrahem ahmad — Mon, 10 Oct 2022 10:55:25 +0000

When you create an array with 10 elements automatically these ten elements have an index, to make all options work easy and fast.

let array=[100,21,334,231,4454,656,767,878,789,12];
        //  0  1   2   3   4    5   6   7   8   9

NOTE: O is Big O notation is a mathematical notation that describes the limiting behaviour of a function.
to understand when I say O(1) or O(n) cost please read this table or for more check google for big o notations

first, think we talk about how much cost to add one more element at the end of this array.

array.push(132);

is a change like that

let array=[100,21,334,231,4454,656,767,878,789,12,132];
        //  0  1   2   3   4    5   6   7   8   9  10

when you add an element to the array, it is only about adding one more index for this new element, so the cost of this is only about O(1).

but when we add one element at the start of the array, what happened?

array.unshift(221);

result

let array=[221,100,21,334,231,4454,656,767,878,789,12];
        //  0   1   2  3   4   5    6   7   8   9  10

Do you see? directly in memory start re-indexing each element by index +1 for adding one index in the start

so the cost for this is O(n)
and take too much time then add elements in end.

everything is about time and memory for doing anything.