DEV Community: Abdulnasır Olcan

Vue Composition API Pattern (Vue 3.5 and Practical Use Cases) 🚀

Abdulnasır Olcan — Wed, 27 Nov 2024 16:23:54 +0000

Modern development requires dynamic, scalable, and maintainable code, especially when building modular applications. The Vue Composition API, introduced in Vue 3, offers an elegant way to handle state, reactivity, and logic encapsulation. With the release of Vue 3.5, new features and improved patterns have emerged to tackle more sophisticated use cases effectively.

This guide dives deep into Conditional Vue Composition API Patterns, featuring advanced examples, real-world scenarios, and cutting-edge techniques that make use of Vue 3.5 features. Both JavaScript and TypeScript implementations are provided to cater to different developer needs.

Why Use the Conditional Pattern?

The Conditional Composition API Pattern focuses on organizing and reusing logic based on specific conditions. It’s especially useful for scenarios like:

Dynamically changing UI based on user roles or preferences.
Fetching and caching data based on application states (e.g., tabs, modals).
Implementing feature toggles for A/B testing.

By encapsulating conditional logic, you can achieve:

Readability: Cleaner and more maintainable code.
Reusability: Composable logic shared across components.
Modularity: Decoupled logic for easier testing and scaling.

Core Setup with Vue Composition API

Before we explore advanced examples, let’s lay down the basics.

Simple Reactive Example (JavaScript)

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="toggle">Toggle Message</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue!');
    const toggle = () => {
      message.value = message.value === 'Hello, Vue!' ? 'Goodbye, Vue!' : 'Hello, Vue!';
    };

    return { message, toggle };
  },
};
</script>

Simple Reactive Example (TypeScript)

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="toggle">Toggle Message</button>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const message = ref<string>('Hello, Vue!');
    const toggle = (): void => {
      message.value = message.value === 'Hello, Vue!' ? 'Goodbye, Vue!' : 'Hello, Vue!';
    };

    return { message, toggle };
  },
});
</script>

Advanced Conditional Patterns

1. Dynamic Form Handling with Schema-Based Validation

Scenario: A dynamic form builder where form fields change based on user preferences or roles.

Composable Example (JavaScript)

import { ref, computed } from 'vue';

export function useDynamicForm(role) {
  const formSchema = computed(() => {
    if (role.value === 'admin') {
      return [
        { label: 'Admin Code', type: 'text', required: true },
        { label: 'Permissions', type: 'checkbox', options: ['Read', 'Write'] },
      ];
    } else {
      return [
        { label: 'Name', type: 'text', required: true },
        { label: 'Email', type: 'email', required: true },
      ];
    }
  });

  const formData = ref({});

  return { formSchema, formData };
}

Composable Example (TypeScript)

import { ref, computed, Ref } from 'vue';

interface FormField {
  label: string;
  type: string;
  required?: boolean;
  options?: string[];
}

export function useDynamicForm(role: Ref<string>) {
  const formSchema = computed<FormField[]>(() => {
    if (role.value === 'admin') {
      return [
        { label: 'Admin Code', type: 'text', required: true },
        { label: 'Permissions', type: 'checkbox', options: ['Read', 'Write'] },
      ];
    } else {
      return [
        { label: 'Name', type: 'text', required: true },
        { label: 'Email', type: 'email', required: true },
      ];
    }
  });

  const formData = ref<Record<string, any>>({});

  return { formSchema, formData };
}

2. Feature Toggles for A/B Testing

Scenario: Dynamically enabling or disabling features for different user groups.

Composable Example

import { ref } from 'vue';

export function useFeatureToggle() {
  const isFeatureEnabled = ref(false);

  const enableFeature = () => (isFeatureEnabled.value = true);
  const disableFeature = () => (isFeatureEnabled.value = false);

  return { isFeatureEnabled, enableFeature, disableFeature };
}

Usage in Components

<template>
  <div>
    <p v-if="isFeatureEnabled">New Feature is Live!</p>
    <p v-else>Old Feature</p>
    <button @click="enableFeature">Enable Feature</button>
    <button @click="disableFeature">Disable Feature</button>
  </div>
</template>

<script>
import { useFeatureToggle } from '@/composables/useFeatureToggle';

export default {
  setup() {
    const { isFeatureEnabled, enableFeature, disableFeature } = useFeatureToggle();
    return { isFeatureEnabled, enableFeature, disableFeature };
  },
};
</script>

3. Optimized Data Fetching with Vue 3.5 Suspense

Scenario: Data fetching with fallbacks and loading states using Suspense.

Component Example

<template>
  <Suspense>
    <template #default>
      <UserData />
    </template>
    <template #fallback>
      <p>Loading...</p>
    </template>
  </Suspense>
</template>

<script>
import { defineAsyncComponent } from 'vue';

const UserData = defineAsyncComponent(() =>
  import('@/components/UserData.vue')
);

export default {
  components: { UserData },
};
</script>

Real-World Use Case: Multi-Tab Data Viewer

Scenario: Dynamic content loading for multi-tab dashboards.

Composable

import { ref, watch, Ref } from 'vue';
import axios from 'axios';

export function useTabData(tab: Ref<string>) {
  const data = ref<any>(null);
  const isLoading = ref<boolean>(false);

  const fetchData = async () => {
    isLoading.value = true;
    try {
      const response = await axios.get(`/api/tabs/${tab.value}`);
      data.value = response.data;
    } catch (error) {
      console.error(error);
    } finally {
      isLoading.value = false;
    }
  };

  watch(tab, fetchData, { immediate: true });

  return { data, isLoading };
}

Component Usage

<template>
  <div>
    <select v-model="activeTab">
      <option value="tab1">Tab 1</option>
      <option value="tab2">Tab 2</option>
    </select>
    <div v-if="isLoading">Loading...</div>
    <div v-else>{{ data }}</div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useTabData } from '@/composables/useTabData';

export default {
  setup() {
    const activeTab = ref('tab1');
    const { data, isLoading } = useTabData(activeTab);

    return { activeTab, data, isLoading };
  },
};
</script>

Conclusion

The Conditional Vue Composition API Pattern allows developers to create dynamic, reusable, and efficient logic that adapts to real-world complexities. By leveraging advanced techniques and features in Vue 3.5, you can:

Build modular, maintainable, and scalable applications.
Optimize performance with watch, Suspense, and computed.
Deliver enhanced user experiences tailored to specific conditions.

These patterns, combined with composable functions and TypeScript, provide a solid foundation for any modern Vue application.

Happy coding! 🚀

Mastering the Conditional React Hooks Pattern (With JavaScript and TypeScript Examples) 🚀

Abdulnasır Olcan — Wed, 27 Nov 2024 16:11:27 +0000

React's powerful hook system has revolutionized state and side-effect management in modern applications. However, adhering to React's Rules of Hooks can make implementing certain behaviors challenging. The Conditional React Hooks Pattern offers a structured way to navigate these challenges while keeping your code clean and maintainable.

In this guide, we’ll explore this pattern with both JavaScript and TypeScript examples, demonstrating advanced usage scenarios and best practices.

Why Do We Need the Conditional Hooks Pattern?

React’s Rules of Hooks enforce:

Top-Level Calls Only: Hooks cannot be used inside conditions, loops, or nested functions.
Consistent Order: Hooks must always be invoked in the same order across renders.

This ensures React can properly track state and effects but complicates dynamic behaviors. For example, conditionally locking the scroll when a modal is open requires thoughtful handling.

The Conditional React Hooks Pattern

The Conditional Hooks Pattern involves always invoking hooks unconditionally but adding internal logic to conditionally execute effects or behaviors.

Example 1: Scroll Lock Hook

JavaScript

import { useEffect } from 'react';

function useScrollLock(enabled) {
  useEffect(() => {
    if (!enabled) return;

    const originalOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';

    return () => {
      document.body.style.overflow = originalOverflow;
    };
  }, [enabled]);
}

TypeScript

import { useEffect } from 'react';

function useScrollLock(enabled: boolean): void {
  useEffect(() => {
    if (!enabled) return;

    const originalOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';

    return () => {
      document.body.style.overflow = originalOverflow;
    };
  }, [enabled]);
}

Usage

function Modal({ isOpen, children }) {
  useScrollLock(isOpen);

  if (!isOpen) return null;

  return <div className="modal">{children}</div>;
}

function Modal({ isOpen, children }: { isOpen: boolean; children: React.ReactNode }) {
  useScrollLock(isOpen);

  if (!isOpen) return null;

  return <div className="modal">{children}</div>;
}

Example 2: Combining Multiple Conditional Hooks

Let’s enhance our modal with useOutsideClick to close it when a user clicks outside.

JavaScript

import { useEffect } from 'react';

function useOutsideClick(ref, onClickOutside, enabled) {
  useEffect(() => {
    if (!enabled || !ref.current) return;

    const handleClick = (event) => {
      if (!ref.current.contains(event.target)) {
        onClickOutside();
      }
    };

    document.addEventListener('mousedown', handleClick);

    return () => {
      document.removeEventListener('mousedown', handleClick);
    };
  }, [enabled, ref, onClickOutside]);
}

TypeScript

import { useEffect, RefObject } from 'react';

function useOutsideClick(
  ref: RefObject<HTMLElement>,
  onClickOutside: () => void,
  enabled: boolean
): void {
  useEffect(() => {
    if (!enabled || !ref.current) return;

    const handleClick = (event: MouseEvent) => {
      if (!ref.current!.contains(event.target as Node)) {
        onClickOutside();
      }
    };

    document.addEventListener('mousedown', handleClick);

    return () => {
      document.removeEventListener('mousedown', handleClick);
    };
  }, [enabled, ref, onClickOutside]);
}

Usage

import { useRef } from 'react';
import useScrollLock from './useScrollLock';
import useOutsideClick from './useOutsideClick';

function Modal({ isOpen, onClose, children }) {
  const ref = useRef(null);

  useScrollLock(isOpen);
  useOutsideClick(isOpen, ref, onClose);

  if (!isOpen) return null;

  return (
    <div ref={ref} className="modal">
      {children}
    </div>
  );
}

import { useRef } from 'react';
import useScrollLock from './useScrollLock';
import useOutsideClick from './useOutsideClick';

function Modal({ isOpen, onClose, children }: { isOpen: boolean; onClose: () => void; children: React.ReactNode }) {
  const ref = useRef<HTMLDivElement>(null);

  useScrollLock(isOpen);
  useOutsideClick(ref, onClose, isOpen);

  if (!isOpen) return null;

  return (
    <div ref={ref} className="modal">
      {children}
    </div>
  );
}

Example 3: Dynamic Event Listener

Sometimes, you might need to manage multiple dynamic hooks. Let’s create a hook that conditionally tracks either window resize or scroll based on user preference.

JavaScript

import { useEffect } from 'react';

function useDynamicEventListener(event, callback, enabled) {
  useEffect(() => {
    if (!enabled) return;

    window.addEventListener(event, callback);

    return () => {
      window.removeEventListener(event, callback);
    };
  }, [event, callback, enabled]);
}

TypeScript

import { useEffect } from 'react';

function useDynamicEventListener(
  event: keyof WindowEventMap,
  callback: EventListener,
  enabled: boolean
): void {
  useEffect(() => {
    if (!enabled) return;

    window.addEventListener(event, callback);

    return () => {
      window.removeEventListener(event, callback);
    };
  }, [event, callback, enabled]);
}

Usage

function App() {
  const [trackResize, setTrackResize] = useState(false);

  useDynamicEventListener(trackResize ? 'resize' : 'scroll', () => console.log('Event!'), true);

  return <button onClick={() => setTrackResize(!trackResize)}>Toggle Event</button>;
}

function App() {
  const [trackResize, setTrackResize] = useState(false);

  useDynamicEventListener(
    trackResize ? 'resize' : 'scroll',
    () => console.log('Event!'),
    true
  );

  return <button onClick={() => setTrackResize(!trackResize)}>Toggle Event</button>;
}

Best Practices

Encapsulation: Encapsulate all logic in custom hooks to keep components clean.
Guard Conditions: Use early returns within hooks to avoid unnecessary computations.
Flexibility: Parameterize hooks with enabled or other conditional parameters.
Type Safety: For TypeScript, enforce strict types for better maintainability.

Conclusion

The Conditional React Hooks Pattern offers a clean, reusable way to manage dynamic behaviors in React while adhering to the Rules of Hooks. Whether you're working with modals, event listeners, or other complex components, this pattern keeps your codebase maintainable and bug-free.

The inclusion of both JavaScript and TypeScript examples ensures developers from both paradigms can integrate this pattern effortlessly. Embrace the Conditional Hooks Pattern to elevate your React applications to new heights.

Happy coding! 🚀

Backend for Frontend (BFF) Architecture 🚀

Abdulnasır Olcan — Tue, 26 Nov 2024 21:31:57 +0000

Modern software architectures aim to optimize user experiences across various platforms (web, mobile, IoT, etc.). However, meeting the diverse requirements of different devices through a single backend system can be challenging. The Backend for Frontend (BFF) architecture provides an effective solution to these challenges. By offering a dedicated backend layer for each client type, BFF enables a more tailored and performant approach.

This article will provide an in-depth analysis of BFF architecture, from its fundamental concepts to advanced implementations, illustrating how to apply it to your projects with examples. We will focus on a multi-backend architecture supporting real-world use cases, particularly React (Web), React Native (Mobile), and multiple backend services.

What is BFF and Why Use It?

Backend-for-Frontend is an architecture that proposes creating dedicated backend layers for each frontend client. In traditional architectures, all clients interact with a single API. However, since each client has distinct requirements, this approach can lead to complications. BFF addresses these issues by creating separate backends for each client type.

Advantages of BFF

Performance Optimization:
- Web and mobile clients have different data needs. When a single API provides all the data, clients may carry unnecessary payloads. BFF ensures only the required data is served.
Reduced Complexity:
- Instead of addressing the needs of all clients in a single backend, BFF offers a structure tailored to each client.
Modularity and Scalability:
- Since each client has its own backend layer, development processes are more modular.
Security:
- The BFF layer can act as a security shield between the client and the main backend.

Project Architecture

Below is an example project structure featuring React (web), React Native (mobile), and a Node.js-based backend:

📦 backend
 ┣ 📂 _data
 ┃ ┗ 📜 db.json        # JSON file for mock data
 ┣ 📂 mobile-bff       # BFF tailored for the mobile client
 ┣ 📂 web-bff          # BFF tailored for the web client
 ┣ 📂 shared           # Shared backend code (e.g., validation, error handling)
 ┗ 📜 package.json     # Backend dependencies

📦 frontend
 ┣ 📂 mobileApp        # React Native application
 ┃ ┣ 📂 app
 ┃ ┃ ┣ 📂 Components   # UI components (following atomic design principles)
 ┃ ┃ ┣ 📂 Screens      # Login, RecipeList, RecipeDetail
 ┃ ┃ ┣ 📂 Context      # Global states (e.g., AuthContext)
 ┃ ┃ ┗ 📂 Navigation   # React Navigation configuration
 ┣ 📂 web              # React (web) application
 ┃ ┣ 📂 Components     # Atomic components
 ┃ ┣ 📂 Pages          # Login, RecipeList, RecipeDetail
 ┃ ┣ 📂 Context        # Global states for web
 ┃ ┗ 📜 index.tsx      # Entry point for React application
 ┗ 📜 package.json     # Frontend dependencies

📦 node_modules         # Project dependencies
📜 Makefile             # Automation scripts
📜 package.json         # Root dependencies
📜 README.md            # Project documentation
📜 yarn.lock            # Dependency version locking

Step-by-Step Implementation

1. Building the Backend Layer

The core backend serves as the central point for business logic and data processing. The BFF layers interact with this backend to provide customized data to clients.

Below is the backend structure and implementation:

Backend Structure:

_data/db.json: Example JSON data source:

{
  "recipes": [
    {
      "id": 1,
      "name": "Classic Margherita Pizza",
      "ingredients": [
        "Pizza dough",
        "Tomato sauce",
        "Fresh mozzarella cheese",
        "Fresh basil leaves",
        "Olive oil",
        "Salt and pepper to taste"
      ],
      "instructions": [
        "Preheat the oven to 475°F (245°C).",
        "Roll out the pizza dough and spread tomato sauce evenly.",
        "Top with slices of fresh mozzarella and fresh basil leaves.",
        "Drizzle with olive oil and season with salt and pepper.",
        "Bake in the preheated oven for 12-15 minutes or until the crust is golden brown.",
        "Slice and serve hot."
      ],
      "prepTimeMinutes": 20,
      "cookTimeMinutes": 15,
      "servings": 4,
      "difficulty": "Easy",
      "cuisine": "Italian",
      "caloriesPerServing": 300,
      "tags": ["Pizza", "Italian"],
      "userId": 166,
      "image": "recipe-images/1.webp",
      "rating": 4.6,
      "reviewCount": 98,
      "mealType": ["Dinner"]
    }
  ]
}

Mobile BFF Example

The Mobile BFF acts as an intermediary layer between the core backend and the mobile client, tailoring responses for mobile-specific needs.

Structure: backend/mobile-bff/index.ts

import express from 'express';
import cors from 'cors';
import { recipes } from '../_data/db.json';

const app = express();
app.use(cors());

// Mobile-specific API route
app.get('/recipes', (req, res) => {
  // Example: Limiting the number of fields sent to mobile
  const minimalRecipes = recipes.map(({ id, name, image, rating, instructions }) => ({
    id,
    name,
    image,
    rating,
    description: instructions[0], // Only send the first instruction
  }));
  res.json(minimalRecipes);
});

const PORT = 3001;
app.listen(PORT, () => console.log(`Mobile BFF running on port ${PORT}`));

Web BFF Example

The Web BFF is structured similarly but caters to the needs of the web client.

Structure: backend/web-bff/index.ts

import express from 'express';
import cors from 'cors';
import { recipes } from '../_data/db.json';

const app = express();
app.use(cors());

// Web-specific API route
app.get('/recipes', (req, res) => {
  // Example: Sending all fields for a detailed web experience
  res.json(recipes);
});

const PORT = 3002;
app.listen(PORT, () => console.log(`Web BFF running on port ${PORT}`));

2. Frontend Integration

Both React and React Native frontends will consume their respective BFF APIs.

Web Integration:

React (Web) fetches data from the Web BFF:

Structure: frontend/web/src/services/recipe-service.ts

import axios from 'axios';

const API_URL = 'http://localhost:3002';

export const fetchRecipes = async () => {
  const response = await axios.get(`${API_URL}/recipes`);
  return response.data;
};

Mobile Integration:

React Native fetches data from the Mobile BFF:

Structure: frontend/mobile/app/services/recipe-service.ts

import axios from 'axios';

const API_URL = 'http://localhost:3001';

export const fetchRecipes = async () => {
  const response = await axios.get(`${API_URL}/recipes`);
  return response.data;
};

3. Global State Management with Context API

Auth Context:

Both web and mobile platforms use Context API to manage authentication states.

Structure: frontend/web/src/context/AuthContext.tsx

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

const AuthContext = createContext(null);

export const AuthProvider = ({ children }) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const login = () => setIsLoggedIn(true);
  const logout = () => setIsLoggedIn(false);

  return (
    <AuthContext.Provider value={{ isLoggedIn, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => useContext(AuthContext);

4. Navigation and Guards

For Mobile: Use React Navigation for screen transitions, such as between RecipeListScreen and RecipeDetailScreen.

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const AppNavigator = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="RecipeList" component={RecipeListScreen} />
        <Stack.Screen name="RecipeDetail" component={RecipeDetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

Route Guards:

import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';

// PrivateRoute
export const PrivateRoute: React.FC = () => {
    const { isAuthenticated } = useAuth();
    return isAuthenticated ? <Outlet /> : <Navigate to="/login" />;
};

// PublicRoute
export const PublicRoute: React.FC = () => {
    const { isAuthenticated } = useAuth();
    return !isAuthenticated ? <Outlet /> : <Navigate to="/" />;
};

For Web: Use React Router with route guards.

import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
import { useAuth } from './context/AuthContext';

const PrivateRoute = ({ component: Component, ...rest }) => {
  const { isLoggedIn } = useAuth();
  return (
    <Route
      {...rest}
      render={(props) =>
        isLoggedIn ? <Component {...props} /> : <Redirect to="/login" />
      }
    />
  );
};

Project Management

1. Makefile

A Makefile simplifies the management of multi-platform projects like this one by providing predefined commands to automate tasks such as installing dependencies, cleaning up, and running applications. Below is an example of a Makefile designed for this BFF architecture:

Makefile Example:

install:
 yarn install --frozen-lockfile

start-backends:
 concurrently "cd backend/web-bff && yarn start" "cd backend/mobile-bff && yarn start"

start-frontends:
 concurrently "cd frontend/web && yarn start" "cd frontend/mobile && yarn start"

clean:
 rm -rf node_modules backend/**/node_modules frontend/**/node_modules

This approach ensures the project is modular, manageable, and ready for both development and production environments. It significantly reduces manual errors and speeds up common tasks.

2. Local API Redirection

When developing and testing a mobile application on a real device or emulator, it’s necessary to route API requests from the mobile application to the local backend server running on your development machine. The adb reverse command allows you to forward traffic from the device to your local machine, enabling seamless API testing.

Steps for API Redirection:

Android:

Forward the Localhost Port Using adb reverse: Open your terminal and use the following commands to redirect traffic:

   adb reverse tcp:5000 tcp:5000  # Redirects Mobile BFF API (e.g., backend)
   adb reverse tcp:3001 tcp:3001  # Redirects another API port (if needed)

These commands ensure that requests made to http://localhost:5000 from your mobile device are correctly routed to the server running on your computer.

Verify the Port Forwarding: Run this command to list the currently active port redirections:

   adb reverse --list

The output will confirm the active mappings, like:

   5000 -> 5000
   3001 -> 3001

Start Your Backend Services: Ensure your backend services (e.g., Mobile BFF) are running on the specified ports:

   make start-backend-mobile-bff

Update Mobile App Configuration: In your mobile app's configuration or environment variables, point the API base URL to http://localhost:5000. This ensures the app connects to the local backend during development.

By following these steps, your mobile app will seamlessly communicate with your local backend, enabling smooth development and debugging workflows.

Conclusion

The Backend for Frontend (BFF) architecture is an invaluable solution for addressing the unique needs of client applications in large-scale projects. By tailoring backend services to specific client requirements, it enhances both performance and development efficiency. In this guide, we implemented a complete example using React, React Native, and Node.js, building customized BFF layers for both mobile and web clients.

Project Benefits:

Custom Backend Endpoints:
Each client type (web, mobile) communicates with its dedicated backend layer, ensuring optimized data delivery.
Sustainable UI Development:
Adopting atomic design principles fosters reusable, maintainable, and scalable UI components.
Streamlined Management:
Tools like Makefile and Yarn make dependency management and development workflows straightforward and efficient.

Project Code

You can find the full project code, including all the examples and configurations discussed in this article, on the GitHub repository. Click the link below to explore, clone, and try it out yourself:

GitHub Repository: Backend-for-Frontend Architecture Project

Start building your next scalable project with BFF architecture today Happy coding! 🚀

React Native 0.76: The New Architecture That Takes Performance and Efficiency to the Next Level 🚀

Abdulnasır Olcan — Mon, 28 Oct 2024 16:36:35 +0000

React Native 0.76 version comes with a comprehensive architectural overhaul to enhance performance, security, and provide a smoother user experience. With this update, the Fabric Renderer and TurboModules make in-app transitions faster and smoother, while memory usage is optimized through auto-loaded modules. The integration of the new JSI and Hermes engine, in particular, ensures secure, high-performance communication with native modules. A closer look at the details and practical applications reveals a versatile toolkit for React Native developers.

Key Features:

TurboModules: Loads only the required modules.
Fabric Renderer: Full support for React 18’s features with concurrent rendering.
Hermes Integration: Low memory usage and fast processing.

1. Fabric Renderer

Fabric is a redesigned UI rendering system in React Native. It removes the traditional asynchronous bridge, which often caused bottlenecks, enabling JavaScript and native components to work more directly together.

Synchronous Communication: Fabric establishes a direct connection with native components, enabling instantaneous, real-time updates.
Partial Tree Updates: Unlike the previous architecture, Fabric renders only the components that have changed, reducing the need for re-rendering and conserving resources.
Goal: To enable React 18's automatic batching and concurrent rendering with a new-generation rendering engine.

Example:

import React, { useState, useEffect } from 'react';
import { Text, View, Platform } from 'react-native';

const useSynchronizedFabricComponent = (text) => {
  // Custom hook simulating Fabric's synchronous behavior
  return text.toUpperCase(); // Fabric instantly reflects this update
};

const FabricEnhancedComponent = () => {
  const [message, setMessage] = useState("Hello Fabric!");
  const displayMessage = useSynchronizedFabricComponent(message);

  useEffect(() => {
    if (Platform.OS === 'android') {
      setMessage("Fabric Running on Android!");
    }
  }, []);

  return (
    <View style={{ padding: 20 }}>
      <Text>{displayMessage}</Text>
    </View>
  );
};

export default FabricEnhancedComponent;

In this example, Fabric instantly renders displayMessage, making the UI smoother with synchronous processing.

2. Turbo Modules and JSI

Turbo Modules replace the traditional bridge with a more efficient system that accelerates interaction between JavaScript and native code. This system ensures that only the required modules are loaded, thus reducing memory usage.

On-Demand Loading: Modules are loaded only when needed, which reduces memory usage.
Performance Boost: JavaScript calls to native functions are faster, minimizing interaction delays.
Goal: To eliminate synchronization issues caused by the bridge architecture and provide fast, type-safe access to modules.
Details: The JavaScript Interface (JSI) enables direct, bridge-free communication between JavaScript and native modules. TurboModules allow for performance gains by loading modules only as needed.

Example:

// Directly calling the native module from JavaScript
import { NativeModules } from 'react-native';
const { ExampleModule } = NativeModules;
ExampleModule.showToast("Hello!");

Example:

import { NativeModules } from 'react-native';
const { BatteryStatusModule } = NativeModules;

const fetchBatteryLevel = async () => {
  try {
    const level = await BatteryStatusModule.getBatteryLevel();
    console.log("Current Battery Level:", level);
  } catch (error) {
    console.error("Failed to retrieve battery level", error);
  }
};

fetchBatteryLevel();

In this example, Turbo Modules make more efficient use of memory by loading BatteryStatusModule only when called, thus speeding up native calls.

3. New Configuration: Codegen and Native Components

Codegen is an automatic code generation tool that ensures type safety between JavaScript and native code. Working alongside TypeScript or Flow, it guarantees code accuracy and reduces the risk of errors.

Type Safety: Ensures strong type safety between JavaScript and native code.
Automatic Code Generation: Automates binding code, enhancing consistency and reducing repetitive tasks.

Setup and Configuration:

Run yarn react-native codegen in your project folder to create the necessary files and bindings.

You typically configure codegen in the react-native.config.js file.

yarn react-native codegen

// react-native.config.js
module.exports = {
  dependencies: {
    // Native modules that require code generation
    'react-native-sample-module': {
      platforms: {
        ios: {
          // Path to the codegen file for iOS
          codegenConfig: {
            name: 'SampleModule',
            jsSrcsDir: './src',
          },
        },
        android: {
          // Path to the codegen file for Android
          codegenConfig: {
            name: 'SampleModule',
            jsSrcsDir: './src',
          },
        },
      },
    },
  },
};

In this example, SampleModule is a native component that Codegen has automatically generated the necessary bridge connections and types for. This allows you to directly call SampleModule in JavaScript with full type safety and without needing to manually write bridge code.

// Importing the native module generated by Codegen
import { SampleModule } from 'react-native-sample-module';

// Directly calling a method on SampleModule, with type safety ensured by Codegen
const getSampleData = async () => {
  try {
    const data = await SampleModule.fetchData();
    console.log("Fetched Data:", data);
  } catch (error) {
    console.error("Failed to fetch data from SampleModule", error);
  }
};

// Invoking the function to get sample data
getSampleData();

SampleModule.fetchData() is called directly, with Codegen ensuring type-safe access to the native module.
Any issues with fetching data from the native module are caught in the catch block for error handling.

import { TurboModule, TurboModuleRegistry } from 'react-native';

// Defining type safety for a native module using Codegen
interface BatteryModule extends TurboModule {
  getBatteryStatus(): Promise<string>;
}

export default TurboModuleRegistry.get<BatteryModule>('BatteryModule');

Here, Codegen makes the getBatteryStatus function available with full type checking, reducing the risk of errors between JavaScript and native layers.

4. Enhanced Bridge

The new Bridge architecture optimizes interactions between native and JavaScript. By reducing dependency on the bridge, it enables critical tasks to be handled directly within native components.

Reduced Dependency: Some data processing occurs directly on the native side.
Native-Oriented Processing: Prioritizes handling of UI and data processing in native code, enhancing speed.

Advantages of the New Bridge Structure

With this innovation, applications can now communicate much faster with frequently used native functions.

Example:

import { DeviceEventEmitter } from 'react-native';

// Listening to a native event without needing the bridge
DeviceEventEmitter.addListener('BatteryLowWarning', (data) => {
  console.log("Battery at critical level:", data.level);
});

In this example, a direct connection is established with the native side, and it responds immediately to the event.

Example:

import { NativeModules, DeviceEventEmitter } from 'react-native';
import React, { useEffect } from 'react';
import { Text } from 'react-native';

const { DeviceLocationModule } = NativeModules;

const LocationComponent = () => {
  // Accessing location information synchronously
  const initialLocation = DeviceLocationModule.getCurrentLocation();

  useEffect(() => {
    // Listening for location changes
    const locationSubscription = DeviceEventEmitter.addListener(
      'LocationChange',
      (newLocation) => {
        console.log(`Updated location: ${newLocation.latitude}, ${newLocation.longitude}`);
      }
    );

    return () => {
      locationSubscription.remove();
    };
  }, []);

  return <Text>Initial Location: {initialLocation.latitude}, {initialLocation.longitude}</Text>;
};

export default LocationComponent;

Synchronous Access: The getCurrentLocation() call provides an instant response at app startup, speeding up the launch time.

Event Handling: The LocationChange event establishes a direct connection with the native side, reflecting location updates instantly without bridge delays.

This model enhances performance, especially for applications requiring real-time data streaming.

5. Enhanced Hermes Engine

Hermes is a JavaScript engine tailored for React Native and optimized for mobile. With the 0.76 updates, memory management and startup performance have improved, app size has been reduced, and startup time has been accelerated.

Smaller App Size: Hermes runtime becomes more compact.
Faster Startup: Starts faster with memory optimizations.
Advanced Setup: To enable Hermes, update your android/app/build.gradle file:

// Enabling Hermes
// android/app/build.gradle
project.ext.react = [
  enableHermes: true  // Enable Hermes for performance
]

6. Concurrent Rendering and Suspense Support

Concurrent Rendering brings React’s priority-based rendering capabilities to React Native. This feature ensures that user interactions happen smoothly without interruptions.

Render on Demand: Heavy UI components are rendered in parts.
User Priority: Prioritizes user actions to provide a better experience.

Example:

import React, { useTransition } from 'react';

const Component = () => {
  const [isPending, startTransition] = useTransition();

  const handleLongProcess = () => {
    startTransition(() => {
      // Executing a heavy process concurrently
      performHeavyCalculations();
    });
  };

  return (
    <div>
      <button onClick={handleLongProcess}>Start Heavy Process</button>
      {isPending && <p>Processing...</p>}
    </div>
  );
};

export default Component;

In this example, useTransition allows the heavy performHeavyCalculations function to run concurrently without blocking user interactions. The isPending flag helps indicate if the process is ongoing, providing feedback to the user, which improves the overall experience.

a. Suspense Support

import React, { Suspense } from 'react';

const DataComponent = React.lazy(() => import('./DataComponent'));

const App = () => {
  return (
    <div>
      <Suspense fallback={<p>Loading data...</p>}>
        <DataComponent />
      </Suspense>
    </div>
  );
};

export default App;

In this example, Suspense is used to handle asynchronous data loading. The DataComponent is loaded lazily, and while it’s being fetched, a fallback message ("Loading data...") is displayed. This keeps the UI responsive and provides a smoother experience during data fetching.

7. New Event Loop and Performance Improvements

Goal: Synchronizing UI updates, making animations smoother, and providing faster responses to user inputs.

Details: The Event Loop is optimized to reduce the load on the main processor, allowing for quick responses to user actions. This provides a major advantage in animations and interactions that require high performance.

Example:

// Automatic batching with React 18
setCounter((c) => c + 1);
setCounter((c) => c + 1); // Increases with a single rendering

a. Automatic Batching:

Normally, multiple state updates can trigger separate renders. However, with automatic batching, these updates are grouped together, avoiding unnecessary renders.

import React, { useState } from 'react';
import { Button, Text, View } from 'react-native';

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

  const handleClick = () => {
    setCount(c => c + 1);
    setAnotherState(s => !s);
    // With automatic batching, both state updates happen within a single render.
  };

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Update" onPress={handleClick} />
    </View>
  );
}

export default Counter;

In this example, the handleClick function includes two different state updates. With React Native 0.76’s automatic batching, these two updates are performed in a single render.

8. useLayoutEffect Support

useLayoutEffect is a React hook fully supported in React Native 0.76's New Architecture update. It provides synchronous access to layout information for DOM or native components. Unlike useEffect, which runs after rendering, useLayoutEffect executes during the commit phase. This allows you to adjust UI component positions immediately, as it works during rendering rather than post-render like useEffect.

Example:

If you want to place a tooltip in the correct position on the screen, you can use useLayoutEffect to position the element before rendering completes. This provides more precise placement, especially for animations or tooltips where positioning is crucial.

import React, { useLayoutEffect, useRef, useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';

function TooltipExample() {
  const tooltipRef = useRef(null);
  const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });

  useLayoutEffect(() => {
    tooltipRef.current.measure((x, y, width, height, pageX, pageY) => {
      setTooltipPosition({ top: pageY + height, left: pageX });
    });
  }, []);

  return (
    <View ref={tooltipRef} style={styles.button}>
      <Text>Button</Text>
      <View style={[styles.tooltip, tooltipPosition]}>
        <Text>Tooltip content</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  button: { padding: 10, backgroundColor: 'lightblue' },
  tooltip: { position: 'absolute', backgroundColor: 'black', color: 'white', padding: 5 },
});

export default TooltipExample;

In this example, useLayoutEffect ensures that the tooltip is positioned correctly right before rendering. By using measure() to get the element’s position, it is accurately placed on the screen.

9. Enhanced iOS and Android Support

iOS: The new architecture improves memory management and resource prioritization, making animations and UI interactions smoother on iOS.
Android: Integration of Turbo Modules and Fabric has been simplified on Android.

Conclusion

React Native 0.76 marks a significant step forward in the development process with performance improvements and new features. The New Architecture supports modern React 18 features like Suspense, Transitions, and Automatic Batching, enabling faster and smoother UIs. With Concurrent Rendering and Suspense Support, UI updates are quicker and more fluid, while Automatic Batching reduces unnecessary renders. useLayoutEffect simplifies synchronous component positioning. The removal of the old bridge and direct access to native modules via JavaScript Interface (JSI) and the new C++-based Native Module System enables type-safe access. Additionally, automatic type definitions via Codegen and an enhanced event loop make React Native more aligned with modern standards. Finally, temporary bridge compatibility allows for a gradual transition, providing flexibility during adaptation to the new architecture. These updates enhance developer productivity and improve user experience by making it faster and more seamless.

Reference: React Native 0.76 — New Architecture

Happy coding! 🚀

Vue 3.5 “Tengen Toppa Gurren Lagann” Innovations: Advanced Features and Most Powerful Updates 🚀

Abdulnasır Olcan — Fri, 25 Oct 2024 16:30:22 +0000

The announcement of Vue 3.5 includes exciting features with new performance optimizations and improvements. This version introduces innovations such as reactivity system enhancements, SSR (Server-Side Rendering) improvements, and new features like custom elements and deferred teleport. Let's take a detailed look at the key features of Vue 3.5 with examples:

1. Reactivity System Enhancements

The performance updates made to the reactivity system in Vue 3.5 deliver significant speed improvements, especially for large data sets.

With optimizations in Vue’s reactivity structure, better memory usage (around 56% savings) and faster reactive processes are achieved. This results in up to a 10x speed increase, particularly in handling large data sets.

This example allows for faster response times when updating complex data lists or tracking computed values.

<script setup>
import { reactive, computed } from 'vue';

const state = reactive({
  items: Array.from({ length: 10000 }, (_, i) => ({ id: i, value: Math.random() }))
});

const totalValue = computed(() => {
  return state.items.reduce((sum, item) => sum + item.value, 0);
});
</script>

<template>
  <p>Total Value: {{ totalValue }}</p>
</template>

In the example, if you have a list of 10,000 items, you'll observe a faster computation and update process with Vue 3.5.

2. Reactive Props Destructure

In Vue 3.5, defining prop variables reactively with defineProps has become much more streamlined. Now, default values can be assigned to props using JavaScript’s built-in features.

This allows us to assign default values to props with a cleaner syntax.

<script setup>
const { count = 0, msg = 'hello' } = defineProps<{
  count?: number;
  msg?: string;
}>();
</script>

<template>
  <p>Count: {{ count }}</p>
  <p>Message: {{ msg }}</p>
</template>

This usage allows default values to be assigned to the count and msg variables without needing helper functions like withDefaults.

3. SSR Improvements

Vue 3.5 introduces features like Lazy Hydration for Server-Side Rendering (SSR). This enables you to create components that load only when visible to the user.

Additionally, APIs like useId() generate unique IDs that ensure client-server matching, and the data-allow-mismatch attribute prevents error warnings for non-matching client data.

a. Lazy Hydration

With Lazy Hydration, support is provided for components that load only when they become visible.

import { defineAsyncComponent, hydrateOnVisible } from 'vue';

const LazyComponent = defineAsyncComponent({
  loader: () => import('./MyComponent.vue'),
  hydrate: hydrateOnVisible()
});

This feature improves performance by loading components only when displayed, instead of loading the entire page.

b. `useId()`

useId() creates unique IDs across components in Vue, ensuring consistency on both the client and server sides. This is crucial when IDs are needed, such as for form elements or accessibility purposes.

For instance, if you need a unique ID for each input field in a form, you can dynamically generate these IDs using useId().

<script setup>
import { useId } from 'vue';

const id = useId(); // Generates a unique and consistent ID
</script>

<template>
  <form>
    <label :for="id">Name:</label>
    <input :id="id" type="text" />
  </form>
</template>

c. data-allow-mismatch

data-allow-mismatch prevents unnecessary warnings in the client console when data on the server and client sides may naturally mismatch. For example, when using dynamic data like date or time, slight differences might occur between the client and server. This feature suppresses warnings, providing a cleaner experience for the user.

<template>
  <span data-allow-mismatch="text">{{ new Date().toLocaleString() }}</span>
</template>

In this example, using data-allow-mismatch="text" enables the display of date and time. data-allow-mismatch prevents data differences between the client and server from being perceived as errors and only suppresses mismatches of type "text." Additionally, specific values like text, children, class, style, and attribute can be used for data-allow-mismatch.

4. Custom Elements Enhancements

The defineCustomElement API provides more options for creating custom HTML elements even without Shadow DOM. New APIs like useHost() and useShadowRoot() also allow access to the shadow root.

a. Accessing Element and Shadow Root with `useHost` and `useShadowRoot`

With Vue 3.5’s useHost and useShadowRoot APIs, you can access and manage the properties of your custom component via the shadow root.

import { defineCustomElement, useHost, useShadowRoot } from 'vue';

export default defineCustomElement({
  setup() {
    const host = useHost(); // Access to the main root of the element
    const shadowRoot = useShadowRoot(); // Access to the Shadow DOM root

    // Custom operations can be performed using the shadow root
    return { host, shadowRoot };
  }
});

With these features, you can manage specific operations tied to the custom element via host or shadowRoot, allowing the component to run smoothly even in systems outside of Vue.

b. Creating a Basic Custom Element with `defineCustomElement`

In Vue, you can use the defineCustomElement API to register a component as a custom HTML element. For example, let’s create a component called “CustomButton”:

// CustomButton.ce.vue
<script setup>
const handleClick = () => {
  alert('Button clicked!');
};
</script>

<template>
  <button @click="handleClick">Click Me!</button>
</template>

Let's define our component as a custom element using defineCustomElement:

// main.js
import { defineCustomElement } from 'vue';
import CustomButton from './CustomButton.ce.vue';

const CustomButtonElement = defineCustomElement(CustomButton);
customElements.define('custom-button', CustomButtonElement);

In this example, the CustomButton component becomes usable with the <custom-button> tag. This custom element can now be integrated into another application and function as an independent component.

c. Using Shadow DOM

In Vue 3.5, you can add an option within defineCustomElement to enable or disable the Shadow DOM. The Shadow DOM encapsulates the component’s styles and DOM structure, preventing conflicts with other styles.

With these features, you can create custom HTML elements in Vue and enable broad usage without requiring the Shadow DOM.

import { defineCustomElement } from 'vue';
import CustomButton from './CustomButton.ce.vue';

const CustomButtonElement = defineCustomElement(CustomButton, { shadow: true });
customElements.define('custom-shadow-button', CustomButtonElement);

In this example, the shadow: true setting allows the component to operate within the Shadow DOM. To disable the Shadow DOM, you can set it to shadow: false.

5. `useTemplateRef()`

Vue 3.5 introduces the useTemplateRef() API, allowing you to define dynamic references easily. With this feature, you can manage refs based on variable IDs rather than being static.

<script setup>
import { useTemplateRef } from 'vue';

const inputRef = useTemplateRef('input');
</script>

<template>
  <input ref="input">
</template>

useTemplateRef provides easier usage for elements with dynamically changing IDs.

6. Deferred Teleport

In Vue 3.5, the defer attribute added to the <Teleport> component allows content to move before the DOM is fully ready. This is especially useful for transferring late-loading content to target elements within Vue.

<Teleport defer to="#target">
  <div>Content teleported to #target after mount</div>
</Teleport>
<div id="target"></div>

This example demonstrates that you can transfer content even when the target element is not yet present in the DOM.

7. `onWatcherCleanup()`

With Vue 3.5, onWatcherCleanup() more effectively manages cleanup operations within watchers.

import { watch, onWatcherCleanup } from 'vue';

watch(id, (newId) => {
  const controller = new AbortController();
  fetch(`/api/${newId}`, { signal: controller.signal });

  onWatcherCleanup(() => {
    controller.abort(); // Stops the operation when the watcher is stopped
  });
});

In this example, onWatcherCleanup prevents unnecessary network traffic by canceling outdated requests.

These are the highlighted features in the Vue 3.5 announcement. For more details and additional examples, you can check out the official blog post.

Happy coding! 🚀

Next.js 15: New Features for High-Performance Development

Abdulnasır Olcan — Tue, 22 Oct 2024 19:02:29 +0000

Next.js 15 brings several advanced features and improvements that significantly enhance both performance and developer experience. Here’s a detailed breakdown of the key updates with examples:

1. Partial Pre-Rendering (PPR) with Detailed Use Case

Concept: PPR allows combining static (SSG) and dynamic (SSR) rendering in a single page. This is particularly useful in scenarios where you want to optimize performance for SEO while fetching dynamic content after the page loads.

Example: E-Commerce Product Page

Consider a product page that statically renders the basic product details like title and description, but fetches up-to-date prices dynamically from an API.

import { Suspense } from 'react';
import StaticProductDetails from '@/components/StaticProductDetails';
import DynamicPrice from '@/components/DynamicPrice';

export const experimental_ppr = true;  // Enabling Partial Pre-rendering

export default function ProductPage({ productId }) {
  return (
    <>
      <StaticProductDetails productId={productId} />  {/* Static */}
      <Suspense fallback={<div>Loading price...</div>}>
        <DynamicPrice productId={productId} />  {/* Dynamic */}
      </Suspense>
    </>
  );
}

Here, the StaticProductDetails component is fetched at build time, so it loads instantly, whereas the DynamicPrice is fetched on the client side for the freshest data.

To enable PPR, the next.config.js should look like this:

const nextConfig = {
  experimental: {
    ppr: 'incremental',  // Enable partial pre-rendering incrementally
  },
};
module.exports = nextConfig;

2. Enhanced Caching Mechanisms

Concept: In Next.js 15, fetch() no longer caches data by default, offering more fine-grained control over data freshness.

Example: API Fetch with Explicit Caching Strategy

Consider a news website where certain articles are frequently updated (breaking news), while others remain relatively static (editorials). You can explicitly define how each API fetch behaves using the new caching options.

// Fetch breaking news with no cache
const breakingNews = await fetch('https://...', {
  cache: 'no-store', // No caching, always fetch the latest
});

// Fetch editorials with caching for better performance
const editorials = await fetch('https://...', {
  cache: 'force-cache', // Cache for quick loading
});

In this example, breaking news will always be up-to-date, while editorials are cached for faster loading times.

3. after() API for Post-Response Operations

Concept: The after() API allows executing tasks (like logging or analytics) after the client has received the response, optimizing perceived performance by deferring non-critical work.

Example: Logging User Actions After Response

Imagine you're running a blog where user visits are logged to track popular posts, but you don’t want this logging to delay the user’s page load.

import { unstable_after as after } from 'next/server';
import { logPageView } from '@/utils/logger';

export default function BlogPage({ content }) {
  after(() => {
    logPageView();  // Log page view after the response has been sent
  });

  return <div>{content}</div>;
}

This example ensures that the user gets the page as quickly as possible, while the logging happens in the background after the page is loaded.

4. Turbopack for Fast Builds

Concept: Turbopack, the new build system for Next.js, written in Rust, significantly speeds up local development, reducing build times and improving developer productivity.

Example: Using Turbopack in Development

To enable Turbopack when starting a new project, simply run:

npx create-next-app --turbo

To enable it for an existing project, add the following to your package.json:

{
  "scripts": {
    "dev": "next dev --turbo"
  }
}

Turbopack greatly improves build times, especially for large-scale projects with many dependencies, making it a great tool for enterprise-level applications.

5. Improved Hydration Error Debugging

Concept: Hydration errors occur when the server-rendered HTML doesn’t match the React-generated HTML on the client. Next.js 15 makes it easier to debug by showing clearer error messages with exact discrepancies.

Example: Hydration Mismatch with State

Let's say your component incorrectly initializes state on the client:

function Counter() {
  const [count, setCount] = useState(0);  // State differs on the server
  useEffect(() => setCount(5), []);  // State set to 5 after component mounts

  return <p>{count}</p>;  // Mismatch during hydration
}

In Next.js 15, the hydration error will clearly show the mismatch between the initial render (0) and the updated state (5), making it easier to trace and fix issues.

6. Advanced Integration with React 19

Concept: Next.js 15 requires React 19 and fully supports the new React Compiler, which automates component optimization, eliminating the need for hooks like useMemo or useCallback for performance.

Example: React 19’s useActionState

With React 19, you can leverage the new hooks like useActionState for managing actions within your components efficiently.

import { useActionState } from 'react';

function ActionComponent() {
  const [actionState, startAction] = useActionState(async () => {
    // some async operation
  });

  return (
    <div>
      <button onClick={startAction}>Start Action</button>
      {actionState.status === 'loading' && <p>Loading...</p>}
    </div>
  );
}

This hook simplifies managing action states (e.g., loading, success, error) without needing to manually track these states with useState.

7. Improved Developer Experience with create-next-app

Concept: Next.js 15 revamps the create-next-app tool, offering an option to start with minimal boilerplate or use Turbopack for improved build times.

Example: Minimal Setup with --empty

You can now start with a clean slate, reducing setup time by creating an empty Next.js project:

npx create-next-app --empty

This generates a basic "Hello World" project without unnecessary files, ideal for developers who want to start from scratch.

8. Step-by-Step Guide to Creating an Advanced Next.js 15 Project

Here’s a detailed guide on setting up and creating a Next.js 15 project with all the advanced features discussed earlier. We’ll cover the project creation and configuration.

1. Create a New Next.js 15 Project

First, let’s start by creating the project using create-next-app, which is the official starter kit for Next.js.

To install Next.js 15, run the following command in your terminal:

npx create-next-app@rc my-nextjs-project --turbo

This command does the following:

--turbo enables Turbopack, the new Rust-based bundler, which speeds up builds and hot-reloading during local development.

Alternatively, if you want a minimal project setup (without boilerplate), use the --empty flag:

npx create-next-app@rc my-nextjs-project --empty

This creates a clean Next.js app with just a "Hello World" page.

2. Set Up Your next.config.js with Advanced Features

After the project is set up, you can enable the experimental features discussed earlier by configuring your next.config.js file.

Here’s a full example of a next.config.js file with several advanced features enabled:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    ppr: 'incremental',  // Enable Partial Pre-rendering
    after: true,         // Enable after() API for post-response tasks
    reactCompiler: true, // Enable React 19 Compiler optimizations
  },
  images: {
    formats: ['image/avif', 'image/webp'],  // Optimize images with Next.js
  },
  future: {
    strictPostcssConfiguration: true, // Ensure strict CSS settings
  },
};

module.exports = nextConfig;

3. Add Necessary Pages and Components

Create a basic structure for your project with the following components:

a. pages/index.js - Main page:

export default function Home() {
  return <h1>Welcome to Next.js 15</h1>;
}

b. components/StaticComponent.js - Static component for PPR:

export default function StaticComponent() {
  return <div>Static content here</div>;
}

c. components/DynamicComponent.js - Dynamic component fetched client-side:

import { Suspense } from 'react';

export default function DynamicComponent() {
  return <div>Dynamic content loaded!</div>;
}

d. pages/product.js - PPR example page:

import { Suspense } from 'react';
import StaticComponent from '@/components/StaticComponent';
import DynamicComponent from '@/components/DynamicComponent';

export const experimental_ppr = true;

export default function ProductPage() {
  return (
    <>
      <StaticComponent />
      <Suspense fallback={<div>Loading dynamic content...</div>}>
        <DynamicComponent />
      </Suspense>
    </>
  );
}

e. Testing the Setup

npm run dev

Open http://localhost:3000 to see your project running. This includes Partial Pre-rendering, Turbopack, and more advanced optimizations.

Features Covered:

- Partial Pre-rendering (PPR)
- after() API for post-response operations
- Caching optimizations
- Turbopack integration for faster builds
- React 19 and Compiler optimizations

These examples cover a wide array of use cases, showing how you can leverage Next.js 15 to build faster, more optimized web applications while improving both the user and developer experience. From PPR for hybrid rendering, to using the after() API for deferred tasks, Next.js 15 introduces tools that significantly push the boundaries of modern web development
Next.js by Vercel - The React Framework.

Reference: nextjs15

React with TypeScript: Advanced Techniques (Compatible with React 19) 🚀

Abdulnasır Olcan — Sat, 19 Oct 2024 10:57:32 +0000

Using TypeScript with React enhances code quality while minimizing the chance of errors. However, effectively leveraging the full power of TypeScript in React projects can sometimes be complex. In this article, we will dive deep into topics such as component types, state management, refs, and event handling in React projects with TypeScript, keeping in mind the new features of React 19. My goal is to help you build a clean, sustainable, and scalable React codebase with comprehensive examples and explanations.

a. Introduction: Transitioning to React with TypeScript

At first, TypeScript’s complex solutions might seem intimidating. However, as you incorporate TypeScript into your daily development flow, you will grow to appreciate it. The biggest challenge lies in integrating TypeScript into React’s various patterns and features in the most efficient way. This article aims to help you overcome these challenges and provide the most elegant solutions to enhance your existing React codebase.

The article is structured into components, state management, refs, and event handling.

b. Component Types and Props Management

React components form the core of an application and are among the most commonly written structures. With the introduction of Hooks, most components are now simple JavaScript functions that take props and return JSX. Therefore, typing components correctly becomes quite straightforward. The only restriction is that the component always takes a single argument, which is an object of properties.

1. Basic Props

First, let’s look at some basic prop structures. In this example, we have a component that accepts title and an optional description as props.

type Props = {
  title: string;
  description?: string;
};

function ProductTile({ title, description }: Props) {
  return (
    <div>
      <div>{title}</div>
      {description && <div>{description}</div>}
    </div>
  );
}

In this example, description is defined as optional, allowing the component to work both with and without the description.

2. Child Components (Children)

Passing child components (children) to a component is a common use case. In such cases, you can simplify your props definition by using the PropsWithChildren type.

import { PropsWithChildren } from 'react';

type Props = {
  title: string;
};

function ProductTile({ title, children }: PropsWithChildren<Props>) {
  return (
    <div>
      <div>{title}</div>
      {children}
    </div>
  );
}

PropsWithChildren automatically adds children to your existing props type, reducing redundancy. If your component only takes children, you can use PropsWithChildren by itself.

3. Piping and Spreading Props

Sometimes, you may want to pass props down to inner components. In such cases, you can avoid repetition by using the ComponentProps type.

import { ComponentProps } from 'react';
import ProductTile from './ProductTile';

type ProductTileProps = ComponentProps<typeof ProductTile>;

type Props = {
  color: string;
} & ProductTileProps;

function ProminentProductTile({ color, ...props }: Props) {
  return (
    <div style={{ background: color }}>
      <ProductTile {...props} />
    </div>
  );
}

This method allows you to automatically inherit props using ComponentProps instead of manually repeating them. This is particularly useful when working with complex prop structures.

4. Typing HTML Elements

The same pattern can be applied to HTML elements. For example, if you want to pass all extra props to a button element:

import { ComponentProps } from 'react';

type ButtonProps = {
  color: string;
} & ComponentProps<'button'>;

function CustomButton({ color, ...props }: ButtonProps) {
  return (
    <button style={{ background: color }} {...props} />
  );
}

This approach allows you to easily pass props to HTML elements while maintaining type safety.

5. Specific Components & Defining Component Types with the typeof Operator

To define a component’s type, using the typeof operator to determine the props of a component provides a simpler and more error-free structure. For example:

Reference: Typeof Type Operator

import { ComponentProps } from 'react';
import Icon from './Icon';

type Props = {
  icon?: typeof Icon;
} & ComponentProps<'button'>;

function Button({ icon: IconComponent, children, ...props }: Props) {
  return (
    <button {...props}>
      {icon && <IconComponent size={24} />}
      {children}
    </button>
  );
}

In this example, the Icon component is typed using typeof, and ComponentProps is used to inherit the props of a button element. This approach provides a more flexible and safe structure.

6. Inferring Props: Flexibility with Generic Components

When creating a component, we often determine the component type dynamically using the as or component prop. This allows the component to accept props appropriate to the HTML element or component it’s being transformed into.

Reference: Passing Any Component as a Prop and Inferring Its Props

type BoxProps<T extends keyof JSX.IntrinsicElements> = {
  as: T;
} & JSX.IntrinsicElements[T];

function Box<T extends keyof JSX.IntrinsicElements>({ as, ...props }: BoxProps<T>) {
  const Component = as;
  return <Component {...props} />;
}

// Usage example:
const App = () => (
  <>
    {/* value doesn't exist on div, this will throw an error */}
    <Box as="div" value="foo" />
    {/* value exists on input, this will work */}
    <Box as="input" value="foo" />
  </>
);

In this example, the Box component can dynamically transform into different HTML elements and correctly accept the corresponding props. By using JSX.IntrinsicElements, you can define the prop types based on the element.

7. Passing Components (Using ComponentType)

ComponentType is a powerful way to pass components as props and render them. This type is especially useful in dependency injection scenarios, such as the render-prop pattern.

Reference: Calling a render prop to customize rendering

import { ComponentType } from 'react';

type ProductTileProps = {
  title: string;
  description?: string;
};

type Props = {
  render: ComponentType<ProductTileProps>;
};

function ProductTile({ render }: Props) {
  const props: ProductTileProps = { title: "Product", description: "Description" };
  return render(props);
}

In this example, the ProductTile component takes another component as a render prop, which is determined using ComponentType, and passes ProductTileProps to it. This provides great flexibility for dynamic component switching and rendering.

8. Usage in Third-Party Components

This pattern is also highly useful when typing and passing components from third-party libraries or through .d.ts files. For instance, you can import components from an external library like this:

declare module 'some-lib' {
  type Props = {
    title: string;
    description?: string;
  };

  export const ProductTile: ComponentType<Props>;
}

9 JSX and Passing Components

Sometimes, you may want to customize content by passing raw JSX. The ReactNode type is useful for this purpose.

import { PropsWithChildren, ReactNode } from 'react';

type LayoutProps = {
  title: string;
  sidebar: ReactNode;
} & PropsWithChildren;

function Layout({ title, children, sidebar }: LayoutProps) {
  return (
    <>
      <div className="sidebar">{sidebar}</div>
      <main className="content">
        <h1>{title}</h1>
        {children}
      </main>
    </>
  );
}

// Usage
const sidebarContent = (
  <div>
    <a href="/shoes">Shoes</a>
    <a href="/watches">Watches</a>
    <a href="/shirts">Shirts</a>
  </div>
);

const App = (
  <Layout title="Running Shoes" sidebar={sidebarContent}>
    {/* Sayfa içeriği */}
  </Layout>
);

ReactNode provides a flexible way to pass raw JSX content to components.

c. State Management

React simplifies state management with hooks like useState and useReducer. Using these hooks with TypeScript ensures that the state and actions are properly typed.

1. Simple State Management with useState

useState is ideal for simple states. The type is inferred from the initial value, but for more complex states, you may need to define types manually.

Reference: useState

import { useState } from 'react';

type AuthState = {
  authenticated: boolean;
  user?: {
    firstname: string;
    lastname: string;
  };
};

type Todo = {
  id: string;
  title: string;
  completed: boolean;
};

function TodoList() {
  const [authState, setAuthState] = useState<AuthState>({ authenticated: false });
  const [todos, setTodos] = useState<Array<Todo> | null>(null);

  // Component logic
}

In this example, manual type definitions are provided for authState and todos, ensuring that TypeScript correctly infers the types.

2. Complex State Management with useReducer

For more complex state updates, useReducer is more suitable. Typing the reducer function and actions correctly with TypeScript ensures safe and maintainable state management.

Reference: useReducer

import { useReducer } from 'react';

type State = {
  count: number;
  error?: string;
};

type Action =
  | { type: 'increment'; payload?: number }
  | { type: 'decrement'; payload?: number }
  | { type: 'reset' }
  | { type: 'error'; message: string };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + (action.payload || 1) };
    case 'decrement':
      return { ...state, count: state.count - (action.payload || 1) };
    case 'reset':
      return { count: 0 };
    case 'error':
      return { ...state, error: action.message };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
      {state.error && <p>Error: {state.error}</p>}
    </div>
  );
}

In this example, while managing complex state logic with useReducer, action types are safeguarded using TypeScript.

d. Using Refs

Refs provide direct access to DOM elements or React components. When using refs with TypeScript, defining the correct types helps prevent errors.

1. Creating a Ref with useRef

useRef is a common way to create refs in functional components. It is initialized with a null value during the first render, and the ref type should be defined correctly.

Reference: useRef

import { useRef, ComponentProps } from 'react'

type ButtonProps = ComponentProps<'button'>;

function Button(props: ButtonProps) {
  const ref = useRef<HTMLButtonElement>(null);

  return <button ref={ref} {...props} />;
}

In this example, the ref created with useRef is typed as an HTMLButtonElement.

2. Forwarding Refs

With React 19, ref forwarding becomes automatic, but forwardRef is still useful in specific scenarios. However, for a simpler usage, you can directly define ref types.

Reference: forwardRef

import { forwardRef, ComponentProps } from 'react'
import Icon from './Icon';

type ButtonProps = {
  icon?: typeof Icon;
} & ComponentProps<'button'>;

const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ icon: IconComponent, children, ...props }, ref) => (
    <button ref={ref} {...props}>
      {IconComponent && <IconComponent size={24} />}
      {children}
    </button>
  )
);

export default Button;

In this example, forwardRef is used to ensure that the ref is correctly forwarded. While ref forwarding has been simplified in React 19, the importance of forwardRef may diminish.

3. Passing Refs to Other Components

Sometimes, instead of directly forwarding refs, you may want to pass them to other components. In such cases, the RefObject type is used.

import React, { RefObject } from 'react';

type PopoverProps = {
  anchor: RefObject<HTMLElement>;
};

function Popover({ anchor }: PopoverProps) {
  // Positioning logic based on the ref
  return <div>Popover Content</div>;
}

In this example, the Popover component can be positioned based on an external ref, allowing it to align with a specific HTML element.

e. Event Handling

Typing events correctly in React ensures that applications are more robust. It’s important to use the right types when managing both React's own Synthetic Event system and native events.

Reference: React event object

1. React and Native Event Types

React uses its own Synthetic Event system while also supporting native JavaScript events. Understanding the difference between these two types of events is key to using the correct types:

React Synthetic Event: Events wrapped by React, providing browser independence.
Native Event: Events coming directly from the browser, used outside of React’s Synthetic Event system.

2. Passing Event Listeners as Props

Passing event listeners as props is a common practice in React components. Using the correct event types with TypeScript ensures that your code is safe and error-free.

import { MouseEventHandler, ComponentProps } from 'react'

type ButtonProps = {
  onClick: MouseEventHandler<HTMLButtonElement>;
} & ComponentProps<'button'>;

function Button({ onClick, ...props }: ButtonProps) {
  return <button onClick={onClick} {...props} />;
}

export default Button;

In this example, the onClick event listener is correctly typed.

3. Form Events and Typing with React.FormEvent

When handling the onSubmit event during form submission, the event type is defined as React.FormEvent<HTMLFormElement>. This ensures proper typing of the event and allows you to safely apply actions like preventDefault.

import * as React from 'react';

function LoginForm() {
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    // Login operations will go here
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" />
      <input type="password" name="password" />
      <button type="submit">Log In</button>
    </form>
  );
}

In this example, the onSubmit function is typed with React.FormEvent, allowing you to safely use preventDefault and other features. This ensures the form works correctly and allows you to handle form events safely.

4. Effectively Adding Event Listeners

You can use useEffect to add native event listeners. In such cases, it's important to use native event types.

import React, { useEffect } from 'react';

function Navigation() {
  useEffect(() => {
    const handleScroll = (e: Event) => {
      console.log('Scrolled:', e);
    };

    document.addEventListener('scroll', handleScroll);
    return () => {
      document.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return <nav>Navigation Bar</nav>;
}

export default Navigation;

In this example, a native scroll event listener has been added, and the correct typing has been applied.

Conclusion

Using TypeScript with React makes your development process more secure and sustainable. By correctly typing component types, state management, refs, and event handling, you reduce the likelihood of errors and make your code more readable. The advanced techniques and examples we've covered in this article will help you develop React applications more cleanly and efficiently.

With the innovations brought by React 19, such as automatic ref forwarding and improved hooks support, combined with TypeScript, you can build powerful and flexible applications. By fully utilizing the robust type system that TypeScript offers, you can make your projects more scalable and maintainable.

Remember, by using TypeScript and React together, you can improve both your developer experience and the quality of the applications you deliver to end users.

Happy coding! 🚀

React 19 and SOLID Principles: Performance, Flexibility, and Advanced Design Strategies in Modern React Applications 🚀

Abdulnasır Olcan — Tue, 15 Oct 2024 21:29:48 +0000

We can write more modern and sustainable React code by combining the innovations and features introduced in React 19 with the SOLID principles. Now, let's explain some of the key features brought by React 19 and how a better structure can be created by integrating them with the SOLID principles, using examples.

1. Single Responsibility Principle (SRP)

SRP: A component should have only one responsibility.

a. Server Components (React 19)

Application with Server Components: In React 19, the Server Components feature was introduced, and these components work on the server-side to handle data processes. This can help us separate responsibilities such as fetching and processing data.

// Server Component that processes user information only on the server
export async function UserProfile({ userId }) {
  const user = await fetchUserData(userId);
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

// A Client Component that handles only UI
function UserProfileClient() {
  return <UserProfile userId="123" />;
}

In this example, the UserProfile component runs on the server side and handles the data fetching process. The UserProfileClient, on the other hand, is only responsible for rendering the UI, which helps us perfectly apply the SRP.

b. Single Responsibility Principle

According to this principle, each component should only perform a single task.

// Component violating SRP
function UserProfile({ user }) {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
      <button onClick={() => alert('Email sent!')}>Send Email</button>
    </div>
  );
}

This component both displays user information and includes a functionality for sending an email. Let's refactor it to comply with the SRP:

// Two separate components adhering to SRP
function UserProfile({ user }) {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
      <SendEmailButton user={user} />
    </div>
  );
}

function SendEmailButton({ user }) {
  const sendEmail = () => {
    // Email sending process
    alert(`Email sent to ${user.email}!`);
  };

  return <button onClick={sendEmail}>Send Email</button>;
}

Here, the UserProfile component only displays user information, and SendEmailButton only handles the email sending functionality. Each component has its own single responsibility.

2. Open/Closed Principle (OCP)

OCP: Components should be open for extension but closed for modification.

a. React 19 Use Event API

The Use Event API introduced in React 19 makes event handling more flexible and extensible. In particular, it becomes easier to extend components that handle UI events and add more functionality without modifying the existing code.

// Component handling an event
function Button({ onClick, label }) {
  return <button onClick={onClick}>{label}</button>;
}

// Extension adhering to OCP
function LoggableButton({ onClick, label }) {
  const handleClick = (e) => {
    console.log('Button clicked');
    onClick(e); // Calls the original onClick
  };

  return <Button onClick={handleClick} label={label} />;
}

Using the Use Event API in React 19, we can extend the button click functionality by adding a log, without the need to modify the existing component. This ensures that the OCP principle is maintained.

b. Open/Closed Principle

This principle states that a class (or component) should be open for extension but closed for modification. In other words, new features should be added without altering the existing functionality.

// Component violating OCP
function Notification({ type, message }) {
  if (type === 'success') {
    return <div className="success">{message}</div>;
  } else if (type === 'error') {
    return <div className="error">{message}</div>;
  } else {
    return <div className="info">{message}</div>;
  }
}

This code violates OCP because we need to modify the component every time a new type is added. Instead, let's make it extensible.

// Extensible structure adhering to OCP
const NotificationTypes = {
  success: (message) => <div className="success">{message}</div>,
  error: (message) => <div className="error">{message}</div>,
  info: (message) => <div className="info">{message}</div>,
};

function Notification({ type, message }) {
  const NotificationComponent = NotificationTypes[type];
  return NotificationComponent ? NotificationComponent(message) : null;
}

In this approach, we can add a new notification type by simply adding a new function to the NotificationTypes object without needing to modify the component itself.

3. Liskov Substitution Principle (LSP)

LSP: A subclass should be able to substitute for its base class.

a. React 19 Suspense for Data Fetching

The Suspense for Data Fetching feature introduced in React 19 allows us to easily switch between components while managing data fetching operations. Components can handle data fetching processes and still be seamlessly interchangeable, adhering to LSP.

1. createResource Function

This function manages asynchronous data fetching and prepares the data for rendering.

function createResource(promise) {
  let status = "pending";
  let result;

  // A suspender that watches the promise
  const suspender = promise.then(
    (res) => {
      status = "success";
      result = res;
    },
    (err) => {
      status = "error";
      result = err;
    }
  );

  return {
    read() {
      if (status === "pending") {
        throw suspender; // Triggers the Suspense mechanism to wait
      } else if (status === "error") {
        throw result; // Throws an error
      } else if (status === "success") {
        return result; // Returns the data successfully
      }
    },
  };
}

2. Data Fetching Process

Let's write two functions that fetch data from different sources: one for user data and the other for product data.

function fetchUserData() {
  return fetch("https://jsonplaceholder.typicode.com/users/1")
    .then((response) => response.json());
}

function fetchProductData() {
  return fetch("https://fakestoreapi.com/products/1")
    .then((response) => response.json());
}

// Resource fetching user and product data
const userResource = createResource(fetchUserData());
const productResource = createResource(fetchProductData());

3. UserProfile and ProductProfile Components

These components use Suspense to wait until the data is loaded during the data fetching process.

import React, { Suspense } from 'react';

// Simple component displaying user profile
function UserProfile({ resource }) {
  const user = resource.read(); // Fetches the data using read()
  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
}

// Simple component displaying product profile
function ProductProfile({ resource }) {
  const product = resource.read(); // Fetches the data using read()
  return (
    <div>
      <h1>{product.title}</h1>
      <p>Price: ${product.price}</p>
    </div>
  );
}

4. Main Component with Suspense

We display fallback content while the data is loading.

function App() {
  return (
    <div>
      <h2>Profile Data</h2>
      {/* Displays "Loading..." until UserProfile data is loaded */}
      <Suspense fallback={<p>Loading user profile...</p>}>
        <UserProfile resource={userResource} />
      </Suspense>

      <h2>Product Data</h2>
      {/* Displays "Loading..." until ProductProfile data is loaded */}
      <Suspense fallback={<p>Loading product...</p>}>
        <ProductProfile resource={productResource} />
      </Suspense>
    </div>
  );
}

export default App;

Explanation:

createResource Function: This function returns a promise (fetch) and triggers the Suspense mechanism, making the component wait until the data is ready. While the data is loading, it remains in the pending state, and once loaded, it moves to the success state.

UserProfile and ProductProfile: Both components use resource.read() to fetch data in the same way; however, one fetches user data, and the other fetches product data. This is in line with the Liskov Substitution Principle (LSP), as these components can substitute for each other.

Usage of Suspense: Suspense shows fallback content while the data is loading. You will see the message “Loading…” until either the user or product data is fully loaded.

In Summary:

LSP-compliant: Both UserProfile and ProductProfile fetch data using the same resource structure. Therefore, you can easily use one in place of the other.
Suspense: It's used to show fallback content while the data is being loaded.

By doing this, we apply the Liskov Substitution Principle from SOLID and manage more modern, asynchronous data fetching processes using React 19's Suspense feature.

b. Liskov Substitution Principle

This principle states that a subclass should be able to substitute for its base class. In other words, when you replace a component with its derived class, the application should work seamlessly.

Example: Applying this in React components generally means developing components to support the same interface. For example:

function TextInput({ value, onChange }) {
  return <input type="text" value={value} onChange={onChange} />;
}

function NumberInput({ value, onChange }) {
  return <input type="number" value={value} onChange={onChange} />;
}

Both components use the same props, so you can swap the TextInput component with the NumberInput at any time, and the application will smoothly accept the change. In other words, these components can substitute for each other.

4. Interface Segregation Principle (ISP)

ISP: Clients should not be forced to depend on interfaces they do not use.

a. React 19 Improved Event Handling

With the Improved Event Handling feature introduced in React 19, it has become possible to control events with more granularity. To apply ISP, we can break down event handling to avoid passing unnecessary event handlers to components.

// Code violating ISP
function UserProfile({ onHover, onClick }) {
  return (
    <div onMouseEnter={onHover} onClick={onClick}>
      <h1>User Profile</h1>
    </div>
  );
}

// Functions separated in line with ISP
function UserProfile({ onClick }) {
  return (
    <div onClick={onClick}>
      <h1>User Profile</h1>
    </div>
  );
}

function HoverableProfile({ onHover }) {
  return (
    <div onMouseEnter={onHover}>
      <h1>Hoverable Profile</h1>
    </div>
  );
}

In this example, each component uses only the event handler it needs. This provides a structure that aligns with the Interface Segregation Principle.

b. Interface Segregation Principle

This principle states that clients should not be forced to interact with interfaces they do not use. In React, an example of this principle is ensuring that a component is not forced to use all props in every case.

// Example violating ISP
function UserDetail({ name, age, address, email }) {
  return (
    <div>
      <h1>{name}</h1>
      <p>{age}</p>
      <p>{address}</p>
      <p>{email}</p>
    </div>
  );
}

Here, every prop is being used as if it's mandatory, but address and email may not be necessary in every case.

To apply ISP, we can separate unnecessary props:

function UserDetail({ name, age }) {
  return (
    <div>
      <h1>{name}</h1>
      <p>{age}</p>
    </div>
  );
}

function ContactDetail({ address, email }) {
  return (
    <div>
      {address && <p>{address}</p>}
      {email && <p>{email}</p>}
    </div>
  );
}

In this way, the client can use only the component they need and doesn't have to deal with unnecessary props.

5. Dependency Inversion Principle (DIP)

DIP: High-level modules should not depend on low-level modules. Both should depend on abstractions.

a. React 19 Context API Improvements

With the improvements made to the Context API in React 19, we can minimize inter-component dependency by injecting dependencies from top to bottom.

// Component directly dependent on context
function UserProfile() {
  const user = useContext(UserContext); // Context is directly used here
  return <div>{user.name}</div>;
}

// Applying DIP by using an abstraction layer
function UserProfile({ userService }) {
  const user = userService.getUser();
  return <div>{user.name}</div>;
}

// Abstraction layer
const userService = {
  getUser: () => useContext(UserContext),
};

// Usage
<UserProfile userService={userService} />

In this example, the UserProfile component is no longer directly dependent on UserContext and is now dependent on an abstract service layer. This helps us maintain the DIP principle.

b. Dependency Inversion Principle

This principle states that high-level modules should depend on abstractions, not on low-level modules.

Example: In React, we can apply this principle by using dependency injection or an abstraction layer to manage dependencies (e.g., API requests) instead of directly using them within components.

// Component directly dependent on API call
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`https://api.example.com/users/${userId}`)
      .then((response) => response.json())
      .then((data) => setUser(data));
  }, [userId]);

  return user ? <div>{user.name}</div> : <p>Loading...</p>;
}

This example violates DIP because the UserProfile component is directly dependent on the API. Let's solve this by abstracting it:

// Component applying DIP by creating an abstraction layer
function UserProfile({ userId, userService }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    userService.getUser(userId).then((data) => setUser(data));
  }, [userId, userService]);

  return user ? <div>{user.name}</div> : <p>Loading...</p>;
}

// UserService abstraction layer
const userService = {
  getUser: (userId) => fetch(`https://api.example.com/users/${userId}`).then((res) => res.json()),
};

// Usage
<UserProfile userId="123" userService={userService} />;

Here, UserProfile is no longer directly dependent on the API; instead, it uses the userService abstraction. This allows userService to be easily tested and replaced.

Conclusion:

The features introduced in React 19 provide a great foundation for applying SOLID principles. Innovations like Server Components, Suspense for Data Fetching, and Improved Event Handling contribute to making the code more flexible, modular, and sustainable. By adhering to SOLID principles in React projects, you can achieve performance and flexibility while leveraging modern features.

Happy coding! 🚀

React 19: New Features, Advanced Techniques, and Enhanced Usage Methods 🚀

Abdulnasır Olcan — Thu, 10 Oct 2024 17:25:48 +0000

React 19 brings numerous innovations to make modern web development more efficient, faster, and user-friendly. Key improvements include server-side component processing, advanced data loading methods, streamlined form management, and flexible ref usage. These changes mark a significant step forward for React 19. This article delves into each new feature with in-depth analysis and advanced examples.

Key Features:

React Compiler: Transforms React code into optimized JavaScript, potentially doubling performance.
Actions: Simplifies data updates, especially for forms.
Server Components: Enables faster loading and improved SEO with server-side rendering.
Enhanced Hooks: Offers more control over component lifecycles.
Asset Loading: Preloads resources for smoother transitions.
Web Components: Enhances compatibility and flexibility in development.

1. Server Components: Performance and SEO Improvements

One of React 19’s most notable features is server-side component processing. Server Components work on the server, sending pre-rendered HTML to the client, drastically reducing load times and enhancing SEO.

// MyComponent.server.js
export default function MyComponent() {
  const data = fetch('https://api.example.com/data').then(res => res.json());
  return <div>{data.title}</div>;
}

In this example, MyComponent is processed on the server and sent as pre-rendered HTML to the browser. This allows users to load the page more quickly while maintaining data security on the server side.

2. Actions API: Form Management and Action-Based Requests

The Actions API is used to manage data updates between the client and server. It simplifies handling form interactions and provides quick responses to user actions.

Example:

import { createAction } from 'react';

const updateUser = createAction(async (data) => {
  await fetch('/api/update-user', {
    method: 'POST',
    body: JSON.stringify(data),
  });
});

function UserProfile() {
  return (
    <form onSubmit={updateUser}>
      <input name="username" placeholder="Username" />
      <button type="submit">Update</button>
    </form>
  );
}

In this example, the updateUser function sends data directly to the server, allowing the form submission to be completed quickly.

3. `use()` Hook: Data Fetching and Context Management

React 19 introduced the use() hook to simplify data management. This hook allows us to work with context values or asynchronous operations in a cleaner and more straightforward way.

Example:

// context.js
export const UserContext = createContext();

// App.js
import { use, UserContext } from './context';

function UserProfile() {
  const user = use(UserContext);
  return <div>{user.name}</div>;
}

This usage makes the code more readable, especially in context-based data management.

Using the `use()` Hook for Data Fetching Without Creating Context

Let's create an example that uses the use() hook for working with asynchronous data without needing to set up a context. This example demonstrates using use() to work with an async data source:

Example:

import { use } from 'react';

// Fake async data fetching function
async function fetchUser() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
  return response.json();
}

// `use()` Hook directly utilizes the async data
function UserProfile() {
  const user = use(fetchUser());

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
      <p>Website: {user.website}</p>
    </div>
  );
}

export default UserProfile;

fetchUser Function: Asynchronously retrieves user data from the API.

use(fetchUser()): The use() hook uses the data returned by the async function, managing the loading process automatically.

Data Usage: When the user data is loaded, it is used directly within the component to display the user's details on the screen.

4. Prefetching and Resource Loading: Key Improvements for User Experience

Methods like prefetchDNS, preconnect, preload, and preinit in the react-dom library speed up access to network and data resources.

Example:

import { prefetchDNS, preconnect, preload, preinit } from 'react-dom';

prefetchDNS('https://example.com');
preconnect('https://api.example.com');
preload('/assets/image.png', { as: 'image' });
preinit('/scripts/library.js', { as: 'script' });

With these methods, resources that users may need are preloaded, offering a smoother experience.

a. Async Scripts Support
React 19 manages scripts marked as async more effectively. This is particularly beneficial for loading third-party libraries or external APIs faster.

Example:

import { preinit } from 'react-dom';

preinit('https://example.com/library.js', { as: 'script', async: true });

With this method, the specified script is loaded asynchronously, enhancing the application's performance.

b. Stylesheet Support
React 19 allows more efficient loading of stylesheets using preload and preconnect. Stylesheets can be preloaded in the background before the user accesses the page, improving the overall loading experience.

Example:

import { preload } from 'react-dom';

preload('/styles/main.css', { as: 'style' });

This ensures that the main.css file is ready before the page loads, allowing for a faster initial render.

5. New `useFormStatus` and `useFormState` Hooks for Form Management

React 19 introduces new hooks for managing form states and data. With useFormStatus() and useFormState(), tracking form statuses and user inputs becomes easier and more efficient.

Example:

import { useFormStatus, useFormState } from 'react';

function ContactForm() {
  const { isSubmitting } = useFormStatus();
  const { values } = useFormState();

  return (
    <form>
      <input name="email" placeholder="Email" />
      <button disabled={isSubmitting}>Send</button>
      {values.email && <p>Email Address: {values.email}</p>}
    </form>
  );
}

These hooks make form submission processes smoother and improve the user experience.

6. `ref` Callback Usage: Managing Refs in Parent-Child Relationships

In React 19, ref callbacks replace forwardRef, providing more flexible communication between parent and child components.

Example:

import { useRef, useEffect } from 'react';

function ChildInput({ innerRef }) {
  return (
    <input
      ref={(ref) => {
        innerRef(ref);
        if (ref) {
          console.log('Child Input ref created:', ref);
        }
      }}
      placeholder="Text Input..."
    />
  );
}

function ParentComponent() {
  const inputRef = useRef();

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
      console.log('Parent focuses the child input');
    }

    return () => {
      console.log('Cleaning up parent reference');
    };
  }, []);

  return (
    <div>
      <h1>Parent-Child Ref Example</h1>
      <ChildInput innerRef={(ref) => (inputRef.current = ref)} />
    </div>
  );
}

In this example, the parent component can access the input element within the child component and perform actions on it.

7. Using `Suspense` for Concurrent Rendering

React 19 introduces concurrent rendering to optimize the processing of components. This feature allows users to interact with the interface more quickly and efficiently. It manages the rendering of components in a way that prioritizes responsiveness, making the application feel smoother and more interactive.

Example:

import { Suspense } from 'react';

function DataComponentFirst() {
  const data = fetch('/api/data/first').then(res => res.json());
  return <div>{data}</div>;
}

function DataComponentSecond() {
  const data = fetch('/api/data/second').then(res => res.json());
  return <div>{data}</div>;
}

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <DataComponentFirst />
      <DataComponentSecond />
    </Suspense>
  );
}

Concurrent Rendering: DataComponentFirst and DataComponentSecond start loading simultaneously, but the one whose data is ready first is displayed first.

Asynchronous Processing: React displays the component that completes its data load while the other continues to load. For example, if DataComponentFirst loads first, it appears on the screen, and DataComponentSecond follows once it’s ready.

In Summary: This way, data is shown to the user as it becomes available without waiting for other components, resulting in a faster and more user-friendly data loading process.

b. Multi-Data Loading Management

Suspense can now be nested for multiple data sources, making data loading processes more flexible.

Example:

import { Suspense } from 'react';

function DataComponent1() {
  const data1 = fetchDataFromAPI1();
  return <div>{data1}</div>;
}

function DataComponent2() {
  const data2 = fetchDataFromAPI2();
  return <div>{data2}</div>;
}

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading... (1)</div>}>
        <DataComponent1 />
        <Suspense fallback={<div>Loading... (2)</div>}>
          <DataComponent2 />
        </Suspense>
      </Suspense>
    </div>
  );
}

This example provides a better user experience by managing the data loading processes efficiently.

8. Automated Code Splitting: Automatic Code Partitioning

React 19 enhances performance by allowing applications to load only the necessary code as needed, reducing the initial bundle size and improving loading times.

Example:

const LazyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

This usage improves performance by loading large components only when needed.

9. Document Metadata Management

React 19 provides enhanced support for managing <title>, <meta>, and <link> elements, making it easier to handle SEO optimization and page titles.

Example:

import { DocumentHead } from 'react';

function SEOPage() {
  return (
    <DocumentHead>
      <title>Custom Title - React 19</title>
      <meta name="description" content="Learn about the new features of React 19." />
    </DocumentHead>
  );
}

10. Stylesheet Management

React 19 optimizes the loading of CSS and other style files, providing a smoother experience during page transitions. It improves the management of tags, ensuring that styles are applied more efficiently.

Example:

import './styles.css';

function StyledComponent() {
  return <div className="styled">This component uses a stylesheet.</div>;
}

11. useSyncExternalStore (Synchronization with External Data Sources)

React 19 introduces the useSyncExternalStore hook for subscribing to external data sources. This enables more efficient handling of global data in applications.

Example:

import { useSyncExternalStore } from 'react';

function useWindowSize() {
  return useSyncExternalStore(
    (onChange) => window.addEventListener('resize', onChange),
    () => ({ width: window.innerWidth, height: window.innerHeight })
  );
}

function WindowSizeComponent() {
  const size = useWindowSize();
  return <div>Window Size: {size.width} x {size.height}</div>;
}

This example creates a component that responds to window size changes.

12. Directives

Directives like 'use client' and 'use server' enforce whether components should run on the client or server side. This makes it clear where a component should be rendered, helping to manage behavior and performance more effectively.

Example:

'use client';

export default function ClientOnlyComponent() {
  return <div>Runs on the client only</div>;
}

13. Automated Code Splitting (Otomatic Code Splitting)

React 19 accelerates page load times by automating component-based code splitting. It ensures that only the necessary code is loaded when required, optimizing performance and reducing initial bundle sizes.

Example:

const LazyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

14. Asset Loading

React 19 makes it easier to load assets like images and videos in the background. By preloading these assets during page transitions, it improves the user experience by reducing waiting times and ensuring smoother navigation.

Example:

const MyLazyImage = React.lazy(() => import('./MyImage'));

function Gallery() {
  return (
    <Suspense fallback={<div>Image Loading...</div>}>
      <MyLazyImage />
    </Suspense>
  );
}

15. Web Components Support

Web Components have become more compatible with React components in React 19. This improvement makes it easier to integrate components developed with different frameworks into React applications, enhancing interoperability and flexibility.

Example:

class MyCustomElement extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<p>React with Web Component</p>`;
  }
}
customElements.define('my-custom-element', MyCustomElement);

function App() {
  return <my-custom-element></my-custom-element>;
}

React 19 allows these kinds of custom components to work seamlessly.

16. useOptimistic New Hook

The useOptimistic hook introduced in React 19 is designed to make the user interface smoother. It is particularly useful for making optimistic updates for actions sent to the server, allowing changes to be reflected in the UI without delays, even before the server's response.

Example:

import { useOptimistic } from 'react';

function LikeButton({ initialLikes }) {
  const [likes, updateLikes] = useOptimistic(initialLikes, (currentLikes) => currentLikes + 1);

  return (
    <button onClick={() => updateLikes()}>
      {likes} Like
    </button>
  );
}

useOptimistic: Takes an initial value as the first parameter (e.g., initialLikes).

Optimistic Update: When updateLikes is called, the number of likes is immediately updated in the UI.

UI Responsiveness: Updates are displayed optimistically before the server response, providing a smoother user experience.

This way, UI changes can be made instantly without waiting for the process to complete, enhancing user interactions.

Advanced Example: A more complex use of useOptimistic can include managing optimistic updates while handling errors and rollbacks during data submission to the server, balancing responsiveness and reliability.

Example:

import { useState, useOptimistic } from 'react';

async function updateServerLikes(likes) {
  const response = await fetch('/api/update-likes', {
    method: 'POST',
    body: JSON.stringify({ likes }),
  });
  if (!response.ok) {
    throw new Error('Failed to update likes');
  }
}

function LikeButton({ initialLikes }) {
  const [error, setError] = useState(null);
  const [likes, updateLikes] = useOptimistic(
    initialLikes,
    (currentLikes, setOptimisticValue) => {
      // Optimistically increase the new value
      setOptimisticValue(currentLikes + 1);

      // Send the update to the server
      updateServerLikes(currentLikes + 1).catch((err) => {
        // Roll back the optimistic value in case of an error
        setOptimisticValue(currentLikes);
        setError('Server error: Update failed');
      });
    }
  );

  return (
    <div>
      <button onClick={() => updateLikes()}>Like ({likes})</button>
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  );
}

Error Handling: The updateServerLikes asynchronous function sends the new number of likes to the server. If the update fails, it throws an error.

Optimistic Update: Using useOptimistic with setOptimisticValue, the number of likes is immediately updated in the UI without waiting for the server response.

Rollback on Error: If updateServerLikes fails, the incremented likes count is rolled back, and an error message is shown to the user.

Smooth User Experience: Users see the updated likes instantly while the request is sent to the server.

Reliability: If the server update fails, useOptimistic rolls back the change to prevent incorrect data display.

Visual Feedback: Users receive immediate feedback in case of errors, improving their understanding of interactions.

17. `useDeferredValue` with Initial Value

The useDeferredValue hook improves UI responsiveness during heavy computations. By setting an initial value, it allows for more controlled transitions to deferred updates.

Example:

import { useState, useDeferredValue } from 'react';

function SearchComponent({ searchTerm }) {
  const deferredSearchTerm = useDeferredValue(searchTerm, {
    initialValue: ''
  });

  return <div>Searching for: {deferredSearchTerm}</div>;
}

In this example, deferredSearchTerm only updates with a delay when the searchTerm value changes. This reduces latency while users type, creating a smoother interface.

These features further strengthen React 19's focus on performance and user experience, especially when dealing with intensive data processing or external resources.

Conclusion:

React 19 offers powerful and flexible tools for modern web development. Features like Server Components, Actions API, and useOptimistic() provide faster and more user-friendly experiences in web applications. Upgrading to React 19 is a great step toward improved performance and smoother user interactions.

Happy coding! 🚀

What Are the Differences Between Map and Set in JavaScript, and Why Is a Deep Copy Not Possible with the Spread (...) Operator?

Abdulnasır Olcan — Thu, 10 Oct 2024 11:38:32 +0000

JavaScript offers powerful data structures and flexible language features. Two of these features are the Map and Set data structures. Although they are used for similar purposes, there are significant differences between Map and Set. In this article, we will explore the key differences between these two structures. Additionally, we will evaluate the copying capabilities of the commonly used spread (...) operator in JavaScript, specifically in the context of Map and Set, and explain why a deep copy is not achievable.

Differences Between Map and Set in JavaScript

In JavaScript, the Map and Set data structures are used to store data, but they have some key differences in terms of functionality and usage. Here are the fundamental differences between Map and Set:

Definition and Purpose:

Map:

A Map is used to store data in the form of key-value pairs. It functions similarly to an object, but any data type (object, function, primitive) can be used as a key.

The value of a key is stored uniquely in a Map.

Maps allow us to establish one-to-one relationships between keys and values.
Set:

A Set stores a collection of unique values. Each value can only appear once, regardless of its data type.

Sets are similar to arrays, but they cannot contain duplicate values.

In a Set, only values are stored; there are no keys.

Structure:
- Map: A Map structure consists of each element being a key and a corresponding value.


const myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');
console.log(myMap.get('key1')); // "value1"

Set: In a Set structure, each element is just a value, and these values are unique.


const mySet = new Set();
mySet.add('value1');
mySet.add('value2');
mySet.add('value1'); // The duplicate value is not added.
console.log(mySet.size); // 2

3. Usage of Key and Value:

Map: Any data type can be used as a key (string, number, object, function, etc.).


const myMap = new Map();
const objKey = { id: 1 };
myMap.set(objKey, 'Object as a key');
console.log(myMap.get(objKey)); // "Object as a key"

Set: Only values are stored in a Set. There is no key-value structure.


const mySet = new Set();
mySet.add({ id: 1 });
console.log(mySet.has({ id: 1 })); // false, because it is a different reference.

4. Duplicate Values:

Map: The same key can be assigned a different value, in which case the previous value is overwritten.


const myMap = new Map();
myMap.set('key', 'value1');
myMap.set('key', 'value2'); // Assigns a new value for the "key".
console.log(myMap.get('key')); // "value2"

Set: A Set cannot contain multiple instances of the same value. If a duplicate value is added, it is ignored.


const mySet = new Set();
mySet.add('value');
mySet.add('value'); // The same value is not added again.
console.log(mySet.size); // 1

5. Performance:

Map: Operations like adding data, retrieving (get), and deleting (delete) are very fast with Maps. Maps are especially advantageous in terms of performance when using an object as a key.
Set: Set also offers high performance in add, has, and delete operations. It is ideal for creating and checking collections of unique values.

6. Iteration:

Map: In Maps, you can iterate over keys (keys()), values (values()), and both together (entries()).


const myMap = new Map();
myMap.set('a', 1);
myMap.set('b', 2);

for (let [key, value] of myMap) {
  console.log(key, value);
}
// Output:
// "a" 1
// "b" 2

Set: In Sets, you can only iterate over the values (using values() or keys()). Sets also provide an entries() method, but this method returns the same value for both key and value.


const mySet = new Set([1, 2, 3]);

for (let value of mySet) {
  console.log(value);
}
// Output:
// 1
// 2
// 3

7. Use Cases:

Map:

If you want to maintain a key-value relationship in a data set (e.g., storing user information by IDs), using a Map is more suitable.

Maps are much more efficient when you need to use objects as keys.
Set:

If you need a list consisting only of unique values, using a Set is ideal.

For example, to remove all duplicate items from an array:


const numbers = [1, 2, 2, 3, 4, 4];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4]

Summary:

These differences can help you understand when to use Map and Set. Both of these data structures are very useful for specific use cases in JavaScript projects.

Why Is a Deep Copy Not Possible with the Spread (...) Operator?

The ... (spread) operator in JavaScript does not create a deep copy; it creates a shallow copy.

What Is the Spread Operator?

The spread operator is used to copy an array or object into another array or object. However, this copying process only copies the surface-level data. This means that if the copied data contains nested arrays or objects, the inner objects or arrays share the same reference.

What Is a Shallow Copy?

A shallow copy copies only the first level of an object or array. If there are other objects or arrays nested inside, their references are copied, meaning that the original and the copied object both point to the same inner object.

What Is a Deep Copy?

A deep copy, on the other hand, creates completely new copies of all nested structures inside an object or array. This means there is no reference sharing between the original and the copied structure. Each data structure is independent of the other.

Explanation with Examples:

Simple Array and Object (Shallow Copy): We can use the spread operator to copy a simple array or object:


const arr1 = [1, 2, 3];
const arr2 = [...arr1];
arr2.push(4);

console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3, 4]

In this example, arr1 and arr2 are independent. Changes made to arr2 do not affect arr1 because a simple array was copied.

Nested Object or Array (Shallow Copy Issue): However, when objects or arrays are nested, the spread operator copies the references:


const obj1 = {
  name: "Abdulnasır",
  address: { city: "Istanbul" }
};

const obj2 = { ...obj1 };
obj2.address.city = "Antalya";

console.log(obj1.address.city); // "Antalya"
console.log(obj2.address.city); // "Antalya"

In this example, when obj2 is created, the reference of the address object is copied. Therefore, changes made to obj2 also affect obj1. In other words, obj1 and obj2 share the same address object.

Using the JSON Method for Deep Copy: To create a deep copy, methods like JSON.parse(JSON.stringify(...)) can be used:


const obj1 = {
  name: "Abdulnasır",
  address: { city: "Istanbul" }
};

const obj2 = JSON.parse(JSON.stringify(obj1));
obj2.address.city = "Antalya";

console.log(obj1.address.city); // "Istanbul"
console.log(obj2.address.city); // "Antalya"

In this method, we convert obj1 into a JSON string using JSON.stringify and then turn it back into an object using JSON.parse. This way, obj1 and obj2 become completely independent objects, and changes made to obj2 do not affect obj1.

Map and the Spread Operator:

You can use the spread operator to copy a Map:


const originalMap = new Map([['key1', 'value1'], ['key2', 'value2']]);
const copiedMap = new Map([...originalMap]);
copiedMap.set('key3', 'value3');

console.log(originalMap.has('key3')); // false
console.log(copiedMap.has('key3')); // true

In this example, copiedMap is a shallow copy of originalMap. However, if there are nested data structures, these inner structures will share the same reference.

Set and the Spread Operator:

Similarly, Sets can also be copied using the spread operator:


const originalSet = new Set([1, 2, 3]);
const copiedSet = new Set([...originalSet]);
copiedSet.add(4);

console.log(originalSet.has(4)); // false
console.log(copiedSet.has(4)); // true

Can a Deep Copy Be Made with the Spread Operator?

The spread operator only copies the first level of data and assigns references to the new variable. In nested data structures, references are preserved, which means that a deep copy is not performed:

Deep Copy Example:


const nestedMap = new Map([['key1', { innerKey: 'innerValue' }]]);
const copiedNestedMap = new Map([...nestedMap]);

copiedNestedMap.get('key1').innerKey = 'newValue';

console.log(nestedMap.get('key1').innerKey); // "newValue"

Here is the translation:

In this example, changing innerKey inside copiedNestedMap also affects nestedMap, because the inner object shares the same reference. In this case, a deep copy would have been necessary.

JSON Approach for Deep Copy (Limited):

Using the JSON method, it is possible to make deep copies for objects, but it cannot be applied directly to special data structures like Map and Set. This is because the JSON format does not support their unique key-value mappings and methods.

Summary:

Spread Operator (...): Creates a shallow copy, meaning it only copies the first-level values.
Shallow Copy: Nested objects or arrays share the same reference.
Deep Copy: All nested structures are created as entirely new copies, with no reference sharing.

Conclusion:

Using Map and Set for data storage and management in JavaScript is highly flexible and powerful. However, it is important to remember that when copying with the ... (spread) operator, only a shallow copy is made, and additional methods are needed for deep copying.

Happy coding! 🚀

JavaScript 2024: Latest Features, Performance, Modern Techniques, and Advanced Coding 🚀

Abdulnasır Olcan — Sun, 06 Oct 2024 15:55:02 +0000

JavaScript is an essential language in modern web development. Over time, it has evolved to become the foundation for both front-end and back-end applications. In this article, we will explore the modern features JavaScript offers in 2024, including coding techniques and important concepts we've covered previously, all with detailed examples.

We'll cover topics valuable to both beginners and experienced developers, discovering how JavaScript helps us write cleaner, more performant, and readable code.

Modern JavaScript Syntax for Clean and Readable Code (ES2020) JavaScript has become simpler with new features like optional chaining, nullish coalescing, and arrow functions.

Optional Chaining & Nullish Coalescing (ES2020)
In the past, we had to check if each property of an object existed. In modern JavaScript, optional chaining (?.) has made this process much simpler. At the same time, nullish coalescing (??) allows us to assign default values to null or undefined variables.

a. Optional Chaining (ES2020)
The optional chaining operator (?.) lets us access an object’s properties or sub-properties without manually checking for their existence, especially useful in deep object structures to prevent errors.

const user = {
  name: 'Abdulnasır',
  info: {
    email: 'abdulnasirolcan@example.com'
  }
};

console.log(user.info?.address); // undefined

console.log(user.info?.address?.city); // undefined

const email = user?.info?.email ?? 'Email not provided';
console.log(email); // Result: 'abdulnasirolcan@example.com'

b. Nullish Coalescing (Nullish Birleştirme Operatörü) (ES2020)

The ?? operator allows assigning a default value only when the value is null or undefined. It does not apply to other falsy values such as 0, false, or ''.

const userInput = '';
const name = userInput ?? 'Default Name';
console.log(name);

const userInput2 = null;
const name2 = userInput2 ?? 'Default Name';
console.log(name2); // Result: 'Default Name'

Logical Assignment Operators (ES2021) In 2024, logical assignment operators have become widely used, simplifying complex expressions with shorter and more effective logic. Operators like &&=, ||=, and ??= allow for more concise and readable value assignments, streamlining conditional logic in JavaScript.

let name = 'Abdulnasır';

name ||= 'Default Name';
console.log(name); // Result: 'Abdulnasır'

let age = 0;

age ??= 30;
console.log(age); // Result: 0 (not nullish)

let isActive = true;
let userName = null;

isActive &&= false;
console.log(isActive); // Result: false

userName ??= 'Guest';
console.log(userName); // Result: 'Guest'

userName ||= 'Abdulnasır';
console.log(userName); // Result: 'Guest'

let x = 0;

// ||=
x ||= 5;
console.log(x); // Result: 5 0 falsy)

// ??=
x ??= 10;
console.log(x); // Result: 5 (0 not nullish)

Pipeline Operator (|>) - Proposed New Feature (ES2024) The pipeline operator (|>) is a proposed feature that hasn't been fully integrated into JavaScript yet, but if accepted, it could be a major game changer. The |> operator allows one function's output to be passed directly into another function in a pipeline-like structure. This simplifies multi-step processes by making function composition more readable and maintainable.

const double = x => x * 2;
const increment = x => x + 1;

const result = 5 
  |> double 
  |> increment;

console.log(result); // Result: 11

Here, the number 5 is first passed into the double function and then into the increment function. This allows us to perform multi-step processes in a cleaner and more understandable way.

Record & Tuple: Immutable Data Structures (ES2024) Record and Tuple are immutable data structures added to JavaScript, providing more secure and efficient data management, especially in large projects.

a. What is a Record? (ES2024)

A Record is similar to JavaScript objects but immutable. Once created, its contents cannot be modified, making it useful for data security and writing more error-free code.

const userRecord = #{ name: 'Abdulnasır', age: 30 };

// Record immutable
// userRecord.name = 'Mehmet'; // Error

console.log(userRecord.name); // Result: 'Abdulnasır'

b. What is a Tuple? (ES2024)

A Tuple is an immutable array. Similar to normal JavaScript arrays, but once a Tuple is created, it cannot be modified. This makes Tuples a useful structure for managing constant data and ensuring immutability in code.

const tuple = #[1, 2, 3];

// Tuple immutable
// tuple.push(4); // Error

console.log(tuple[0]); // Result: 1

The use of Record and Tuple enhances data security and optimizes performance in large, complex projects. These structures address the need for immutable data structures in JavaScript.

Top-Level Await (ES2022) Top-level await allows the use of await directly within modules without needing an async function. This is particularly useful for waiting for asynchronous operations to complete before the module loads, simplifying asynchronous code in modular systems.

const data = await fetch('https://api.example.com/data');
const jsonData = await data.json();
console.log(jsonData);

WeakRefs and FinalizationRegistry (ES2021) These new features allow us to create weak references to an object in memory, enabling us to check if the object has been cleaned up by the garbage collector. This is particularly useful for large data or systems that use weak references, providing better memory management and control in JavaScript applications.

let object = { name: 'Weak reference object' };
const weakRef = new WeakRef(object);

console.log(weakRef.deref()); // { name: 'Weak reference object' }

setTimeout(() => {
  console.log(weakRef.deref());
}, 1000);

Arrow Functions (ES2015) Arrow functions provide a shorter and more concise way to define functions. A key advantage of arrow functions is that they preserve the this context, which is particularly useful in functions that are nested or passed as callbacks. This makes them a powerful tool for cleaner and more efficient coding in modern JavaScript.

const multiply = (a, b) => a * b;
console.log(multiply(2, 3)); // Result: 6

These modern features both speed up the coding process and improve readability.

Managing Asynchronous Operations: Promises, async/await, and Promise.allSettled() (ES2015/ES2020) Asynchronous operations are very common in web development, particularly for managing long-running processes like API calls. JavaScript has made handling these operations more readable with the introduction of Promises and async/await.

a. Promises and async/await (ES2015)

The best way to handle asynchronous code in a synchronous manner is by using async and await. This allows us to write cleaner code without chaining multiple .then functions.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

b. Promise.allSettled() (ES2020)

When managing multiple Promise operations, Promise.allSettled() waits for all the promises to complete, regardless of whether they succeed or fail. This makes it easier to handle multiple asynchronous operations simultaneously, as it provides a way to get the results of each promise, including those that fail, without short-circuiting like Promise.all().

const promise1 = Promise.resolve('Data 1');
const promise2 = Promise.reject('Error in Data 2');
const promise3 = Promise.resolve('Data 3');

Promise.allSettled([promise1, promise2, promise3]).then(results => {
  results.forEach(result => {
    console.log(result.status === 'fulfilled' ? result.value : result.reason);
  });
});

c. Promise.any() (ES2021)

Promise.any() returns the result of the first promise to successfully resolve from a given set of promises. This method allows you to focus on whichever promise succeeds first, without failing the entire operation if one or more promises reject. It’s particularly useful when you're interested in the success of any promise and don’t need all promises to complete successfully.

const p1 = Promise.reject('Error 1');
const p2 = Promise.resolve('Success 1');
const p3 = Promise.resolve('Success 2');

Promise.any([p1, p2, p3])
  .then(result => {
    console.log(result); // Result: 'Success 1'
  })
  .catch(error => {
    console.log(error);
  });

9. Simplifying Error Management: Beyond try-catch (ES2020)

Error management is always crucial. Traditional try-catch blocks can sometimes become overly nested, making code harder to read. However, with async/await, error handling can be made cleaner. Additionally, creating helper functions allows for even simpler error management.

Error Management with Helper Functions (ES2020)

In the example below, a to() function manages asynchronous operations using try-catch and returns both the error and result as a tuple (array).

a. Error and Data Management

This pattern simplifies handling both errors and results in one step.

async function to(promise) {
  try {
    const result = await promise;
    return [null, result];
  } catch (error) {
    return [error, null];
  }
}

async function fetchData() {
  const [error, data] = await to(fetch('https://api.example.com/data'));
  if (error) return console.error('Fetch error:', error);
  console.log(data);
}

b. Error and Data Management

async function to(promise) {
  try {
    const data = await promise;
    return [null, data];
  } catch (error) {
    return [error, null];
  }
}

async function fetchData() {
  const [networkError, response] = await to(fetch('https://api.codingbeautydev.com/docs'));
  if (networkError) return console.error('Network Error:', networkError);

  const [parseError, data] = await to(response.json());
  if (parseError) return console.error('Parse Error:', parseError);

  return data;
}

Helper Function (to): This function separates the error and result of a promise into an array ([err, data]). This allows direct error checking, making the code cleaner and avoiding deeply nested try-catch blocks.

Network and Parse Error Handling: The to function simplifies error management for both the fetch operation and JSON parsing, making the code more readable and easier to maintain.

10. Efficient Array Operations: map, filter, reduce (ES2015)

JavaScript’s functional programming capabilities make working with arrays easier. Methods like map, filter, and reduce allow complex operations on arrays in a concise manner.

a. Processing Arrays with map() and filter() (ES2015)

map() is used to transform each item in an array, while filter() selects items that meet specific conditions.

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(num => num * 2);
console.log(doubled); // Result: [2, 4, 6, 8, 10]

const filtered = numbers.filter(num => num > 3);
console.log(filtered); // Result: [4, 5]

b. Reducing an Array to a Single Value (ES2015)

reduce() is used to reduce an array to a single value. It’s perfect for tasks like summing, multiplying, or performing more complex calculations.

const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // Result: 15

These functions make your code shorter and more readable when working with complex arrays.

11. Performance Optimization: Lazy Loading, Debouncing, Throttling (ES2020)

To improve the user experience, optimizing JavaScript performance is crucial. Techniques like lazy loading, debouncing, and throttling can significantly speed up applications, especially when working with large datasets and DOM manipulations.

a. Delaying Image Loading with Lazy Loading (ES2020)

Lazy loading ensures that images are only loaded when they are about to appear in the user's viewport, improving page load times significantly.

<img data-src="image.jpg" alt="Lazy Loaded Image" class="lazy" />

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const lazyImages = document.querySelectorAll('img.lazy');
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target;
          img.src = img.dataset.src;
          img.classList.remove('lazy');
          observer.unobserve(img);
        }
      });
    });
    lazyImages.forEach(img => observer.observe(img));
  });
</script>

b. Improving Performance with Debouncing and Throttling

Debouncing and throttling are used to control frequent events. For instance, instead of sending an API request on every keystroke in a search bar, these techniques ensure the API call is only made after the user has finished typing. This reduces unnecessary requests and enhances performance by minimizing the load on both the client and the server.

function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(function(event) {
  console.log('Fetching search results for:', event.target.value);
}, 300));

12. The Future of JavaScript: BigInt, WeakRef, and Temporal API (ES2021/ES2024)

In 2024, JavaScript continues to evolve with new features that stand out. BigInt allows for working with numbers larger than 2^53 - 1, overcoming the limitations of regular JavaScript numbers. WeakRef improves memory management by creating weak references to objects that can be cleaned up by the garbage collector. The proposed Temporal API simplifies working with dates and times, offering a more precise and powerful way to handle temporal data than the standard Date object.

a. Working with Large Numbers Using BigInt

JavaScript typically operates safely within the 2^53 - 1 range. To handle larger numbers, BigInt is used.

const bigNumber = BigInt('9007199254740992');
console.log(bigNumber + 1n); // 9007199254740993n

b. Working with Time and Dates Using the Temporal API

JavaScript's built-in Date class can sometimes be limiting in terms of accuracy and complexity. The Temporal API is a proposed new feature that addresses these issues by providing a more precise and powerful way to handle time and date operations. With Temporal, you can work with time zones, calendar systems, and durations in a more reliable and efficient manner, making it ideal for modern applications that require accurate date and time manipulations.

const today = Temporal.Now.plainDateISO();
console.log(today.toString()); // Result: 2024-10-06

const today = Temporal.Now.plainDateISO();
console.log(today.toString()); // Result: 2024-10-05

const birthday = Temporal.PlainDate.from('1990-05-15');
const duration = today.since(birthday);
console.log(Result: ${duration.years});

13. Private Class Fields (ES2021)

In JavaScript, class properties can be made private by using the # symbol before the property name. This ensures that the property is not accessible outside of the class, improving data encapsulation and security. Private class fields are a critical feature for maintaining data privacy within objects, as they prevent external code from directly accessing or modifying sensitive data, reinforcing the principle of information hiding in object-oriented programming.

class Person {
  #name; // Private Field

  constructor(name) {
    this.#name = name;
  }

  getName() {
    return this.#name;
  }
}

const abdulnasir = new Person('Abdulnasır');
console.log(abdulnasir.getName()); // Result: 'Abdulnasır'
console.log(abdulnasir.#name); // Error

14. String.replaceAll() (ES2021)

The String.replaceAll() method allows you to replace all occurrences of a substring within a string. This makes it much easier to modify multiple instances of a character or pattern at once. Unlike replace(), which only changes the first match, replaceAll() ensures that every match of the specified substring or regular expression is replaced, making string manipulation tasks much simpler, especially when dealing with repetitive text replacements.

const text = 'Hello world! The world is wonderful!';
const newText = text.replaceAll('world', 'planet');
console.log(newText); // Output: 'Hello planet! The planet is wonderful!'

15. Intl.RelativeTimeFormat (ES2020)

Intl.RelativeTimeFormat is useful for expressing how long ago or how soon a date is relative to the current time. It provides a more natural way to present time-based information to users.

const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
console.log(rtf.format(-1, 'day')); // Output: 'yesterday'
console.log(rtf.format(1, 'day'));  // Output: 'tomorrow'

16. Array.flatMap() (ES2019)

The flatMap() method simplifies array processing by both flattening the array (removing nesting) and performing a map operation in a single step. This allows for more concise transformations of arrays.

const numbers = [1, 2, 3, 4];
const doubledAndFlattened = numbers.flatMap(n => [n, n * 2]);
console.log(doubledAndFlattened); // Result: [1, 2, 2, 4, 3, 6, 4, 8]

Conclusion

JavaScript has evolved into an indispensable language for modern applications. With the new features introduced by 2024, it enables writing cleaner, more efficient, and performant code. Asynchronous processes, functional arrays, modern error handling, and performance optimizations maximize the potential of JavaScript.

The examples we've discussed in this article showcase how JavaScript's new and powerful features can help you build more effective solutions in your projects. By practicing more, you can explore these advantages and develop better applications.

Happy coding! 🚀

Fundamentals of React Native App Development: Dependencies, Performance, Native Modules, and Publishing Guide

Abdulnasır Olcan — Sat, 05 Oct 2024 15:30:49 +0000

React Native is a powerful tool that allows you to develop both iOS and Android applications with a single codebase. However, a successful app development process is not just about using components. You also need to master several core topics, such as dependency management, performance optimization, data management, form validation, native modules, and finally, the app publishing process.

Building on the Basics: In addition to React Native's basic features like useState, useEffect, useMemo, useCallback, and the Context API, you should also be proficient in more complex structures such as Redux, React Navigation, AsyncStorage, MMKV, and performance optimization techniques.

Native Modules and Bridging: React Native may not always be sufficient; therefore, when necessary, you should be able to write native modules with Java (for Android) and Objective-C/Swift (for iOS).

Performance Management: To control the re-rendering of components, hooks like memo, useCallback, and useMemo should be effectively utilized. Additionally, optimizations should be considered when working with lists, such as using FlatList.

Animations: To ensure smooth and high-performance animations in React Native, libraries like Reanimated and Gesture Handler should be well understood.

App Startup Time: Techniques for shortening the app's startup time and loading large modules using lazy loading should be known.

Redux / Context API / React Query: In large-scale projects, global state management solutions like Redux or React Query should be handled, while smaller projects may benefit from using the Context API.

State Persistency: In cases where data needs to be continuously stored, state management should be maintained with tools like Redux Persist, MMKV, or AsyncStorage.

In this article, I will also dive into tools and libraries such as Watchman, Gemfile, Metro, react-native-gesture-handler, react-native-gradle-plugin, react-native-mmkv, react-native-webview, @tanstack/react-query, Axios, Ky, react-hook-form, Zod, and TypeScript, explaining them in detail with examples.

1. React Native Development Environment Setup

a. What is Watchman?

Watchman is a tool developed by Facebook that monitors file changes and triggers specific commands when those changes occur. In React Native projects, it is used to enable automatic reload (hot-reload). When you make changes to a file, Watchman detects the modification and updates the project accordingly.

brew install watchman

How Does Watchman Work?

Watchman monitors file system changes and automatically restarts the project based on these changes. This speeds up the development process and eliminates the need for manual restarts.

b. What is a Gemfile?

A Gemfile is a file used to manage Ruby dependencies. You can use a Gemfile to integrate tools like Fastlane and Cocoapods into your project. This provides fast and efficient dependency management, especially for iOS applications.

source "https://rubygems.org"

gem "fastlane"
gem "cocoapods"

This file allows you to install the correct versions of Fastlane and Cocoapods. By running the bundle install command, you can add these dependencies to your project.

c. What is Metro?

Metro is React Native’s bundler tool. It combines all your JavaScript code into a single file and optimizes it. Metro compiles project code quickly and provides advanced error reporting.

Role of Metro:

Hot Reloading: Reflects code changes instantly in the app.
Code Bundling: Combines JavaScript files to improve performance.
Error Reporting: Makes errors more readable during development.

Metro enhances the performance of React Native projects and speeds up the development process.

2. Dependency Management in React Native: Working with Cocoapods and Gradle

Dependency management is important for both platforms in React Native projects: Cocoapods for iOS and Gradle for Android.

What is Cocoapods and How is it Used?

Cocoapods provides dependency management for iOS applications. You can add third-party libraries to your project by adding the necessary dependencies to the Podfile and running the pod install command.

Sample Podfile:

platform :ios, '12.0'

target 'YourApp' do
  pod 'Firebase', '~> 6.0'
  pod 'ReactNativeGestureHandler', :path => '../node_modules/react-native-gesture-handler'
end

Installation Command:

pod install

Cocoapods makes it easy to add and manage third-party libraries in iOS projects. It provides version control for any library and manages in-app dependencies.

What is Gradle and How is it Used in Android Projects?

Gradle is the dependency management and build system for Android projects. The react-native-gradle-plugin simplifies and optimizes these processes. In Android projects, you can define and include third-party libraries using the build.gradle file.

Example build.gradle:

dependencies {
    implementation 'com.google.firebase:firebase-analytics:17.2.0'
    implementation 'com.facebook.react:react-native:+'
}

The react-native-gradle-plugin adapts Gradle for React Native projects and speeds up build processes. It also provides the necessary settings to ensure the proper signing and optimization of the application.

3. Native Modules and Bridging

React Native handles many tasks using JavaScript; however, in some cases, you may need to write native modules. Particularly for platform-specific tasks (like Bluetooth, NFC, or camera access), native modules are written on the Android (Java) and iOS (Objective-C/Swift) sides and bridged with React Native.

a. Creating a Native Module: Android

Java is used to create a native module for Android. For example, to write a simple module that fetches the battery level of an Android device, you can follow these steps:

Step 1: Creating a Java File

To create a native module for Android, create a Java file at the path android/app/src/main/java/com/yourproject/. In this example, the file name will be BatteryModule.java.

package com.yourproject;

import android.os.BatteryManager;
import android.content.Context;
import android.content.Intent;
import android.content.IntentFilter;
import androidx.annotation.NonNull;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Promise;

public class BatteryModule extends ReactContextBaseJavaModule {
  private static ReactApplicationContext reactContext;

  BatteryModule(ReactApplicationContext context) {
    super(context);
    reactContext = context;
  }

  @NonNull
  @Override
  public String getName() {
    return "BatteryModule";
  }

  @ReactMethod
  public void getBatteryLevel(Promise promise) {
    try {
      Intent batteryIntent = reactContext.registerReceiver(null, new IntentFilter(Intent.ACTION_BATTERY_CHANGED));
      int level = batteryIntent != null ? batteryIntent.getIntExtra(BatteryManager.EXTRA_LEVEL, -1) : -1;
      int scale = batteryIntent != null ? batteryIntent.getIntExtra(BatteryManager.EXTRA_SCALE, -1) : -1;
      float batteryLevel = level / (float) scale;
      promise.resolve(batteryLevel);
    } catch (Exception e) {
      promise.reject("Error", e);
    }
  }
}

Explanation:

We have created a Java class named BatteryModule, and this class will be bridged to React Native as a native module.
We defined a method called getBatteryLevel. This method retrieves the battery level of the device and returns it to the React Native side through a Promise.

Step 2: Registering the Module with React Native

Go to the MainApplication.java file and register the native module with React Native.

import com.yourproject.BatteryModule;

public class MainApplication extends Application implements ReactApplication {

  @Override
  protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
      new BatteryPackage()
    );
  }
}

To create the module package, we add a class named

package com.yourproject;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class BatteryPackage implements ReactPackage {

  @Override
  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();
    modules.add(new BatteryModule(reactContext));
    return modules;
  }

  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }
}

Explanation:

BatteryPackage is used to link the BatteryModule class to React Native. By adding this package to MainApplication, the bridging process is completed.

b. Creating a Native Module: iOS

On the iOS side, you can write a native module using Swift or Objective-C. For example, to retrieve the battery level of iOS devices, you can use the following code:

Step 1: Creating a Swift File

In Xcode, we create a Swift file named BatteryModule.swift.

import Foundation
import UIKit

@objc(BatteryModule)
class BatteryModule: NSObject {

  @objc
  func getBatteryLevel(_ resolve: @escaping RCTPromiseResolveBlock, reject: RCTPromiseRejectBlock) {
    UIDevice.current.isBatteryMonitoringEnabled = true
    let batteryLevel = UIDevice.current.batteryLevel
    if batteryLevel >= 0 {
      resolve(batteryLevel)
    } else {
      let error = NSError(domain: "", code: 200, userInfo: nil)
      reject("no_battery_info", "Could not fetch battery level", error)
    }
  }

  @objc
  static func requiresMainQueueSetup() -> Bool {
    return false
  }
}

Explanation:

We create a class named BatteryModule. This class retrieves the device's battery level.
The getBatteryLevel method returns the battery level using a Promise.

Step 2: Bridging the Module

To bridge BatteryModule to React Native, we create an Objective-C bridging file named BatteryModule.m:

#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(BatteryModule, NSObject)

RCT_EXTERN_METHOD(getBatteryLevel:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject)

@end

This is used to bridge the module we wrote in Swift to React Native.

c. Usage on the React Native Side

Now that we have written and bridged the native modules for both Android and iOS, we can use these modules on the React Native side as follows:

import { NativeModules, Button, Text, View } from 'react-native';
import React, { useState } from 'react';

const { BatteryModule } = NativeModules;

const App = () => {
  const [batteryLevel, setBatteryLevel] = useState(null);

  const getBatteryLevel = async () => {
    try {
      const level = await BatteryModule.getBatteryLevel();
      setBatteryLevel(level);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <View>
      <Text>Battery Level: {batteryLevel !== null ? ${batteryLevel * 100}% : N/A}</Text>
      <Button title="Get Battery Level" onPress={getBatteryLevel} />
    </View>
  );
};

export default App;

Explanation:

By calling the BatteryModule.getBatteryLevel() function, we retrieve the device's battery level and display it on the screen using useState.
With this method, you can add platform-specific features to React Native projects. Native modules provide more direct access to device hardware and can help improve the performance of your projects.

4. Performance Optimization: Developing Faster Applications

In React Native projects, performance is a critical concern. Ensuring that your application is fast and smooth for users is one of the key factors for a successful mobile application. You can use the following optimization methods to enhance performance in large and complex projects:

a. Optimized Listings with FlatList

If your application manages large data lists, using FlatList can significantly improve performance. FlatList only renders the items visible on the screen, which reduces unnecessary memory usage.

<FlatList
  data={data}
  renderItem={({ item }) => <Text>{item.title}</Text>}
  keyExtractor={item => item.id}
/>

Additionally, if you want to use a faster and more performant FlatList, you can check out this library:

Github Repo: Shopify Flash List

b. Preventing Unnecessary Renders with Memoization and useCallback

In React Native projects, you can use the useMemo and useCallback hooks to prevent unnecessary renders, especially in large components. These hooks prevent components from re-rendering unless certain changes occur.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

These methods especially improve performance on screens with many components, making your application respond faster.

c. Performant Animations with Reanimated and Gesture Handler

In React Native, animations can sometimes lead to performance issues. Therefore, libraries like React Native Reanimated and Gesture Handler are used for high-performance animations and gestures.

import { useSharedValue, withSpring } from 'react-native-reanimated';

const progress = useSharedValue(0);

progress.value = withSpring(1);

These libraries ensure that performance is maintained, especially when working with heavy animations and gestures.

Github Repo: React Native Reanimated

5. Performance Optimization: High-Performance Storage with MMKV

When performing data storage operations in your application, you need a high-performance storage mechanism. react-native-mmkv, developed by Facebook, is an optimized storage solution for React Native. MMKV allows you to handle large data sets quickly.

How to Use MMKV?

Installation:

Example: Storing and Retrieving User Data

To store and later retrieve simple user data using MMKV, you can follow these steps:

import { MMKV } from 'react-native-mmkv';

const userData = {
  id: 1,
  name: "Abdulnasır olcan",
  email: "abdulnasir.olcan@example.com",
  isLoggedIn: true,
};

const storage = new MMKV();

storage.set('user', JSON.stringify(userData));

const userString = storage.getString('user');

if (userString) {
  const user = JSON.parse(userString);
  console.log('user:', user);
} else {
  console.log('Error');
}

Key Points:

Data Saving: We save the data using storage.set('key', value). Here, we store the user data (userData) in JSON format under the user key.
Data Reading: We retrieve the data using storage.getString('key'). To convert the data back to JSON format, we use JSON.parse().
Error Handling: When fetching the data, if the data is empty (for example, if it was never saved or has been deleted), it will return null. Therefore, we check whether the data exists or not.

Example: Updating and Deleting Data

Updating or deleting data stored in MMKV is also very simple. You can use the examples below for updating and deleting data.

Updating Data:

const updatedUserData = {
  ...userData,
  name: "Abdulnasır olcan",
};

storage.set('user', JSON.stringify(updatedUserData));

const updatedUserString = storage.getString('user');
if (updatedUserString) {
  const updatedUser = JSON.parse(updatedUserString);
  console.log('update user:', updatedUser);
}

Example: Deleting Data

// Depolanan kullanıcı verisini siliyoruz
storage.delete('user');

// Sildiğimiz veriyi kontrol ediyoruz
const deletedUserString = storage.getString('user');
if (!deletedUserString) {
  console.log('Kullanıcı verisi başarıyla silindi.');
}

MMKV is a fast and secure local data storage solution used to enhance your application's performance. It allows you to quickly store user data, session information, or other important information.

Github Repo: React Native mmkv

6. Integration with Web Content: react-native-webview

You can use the react-native-webview component to display web content in your application. This component renders web pages using the native browser engine.

How to Use WebView?

Installation:

npm install react-native-webview

Example Usage:

import { WebView } from 'react-native-webview';

const MyWeb = () => (
  <WebView source={{ uri: 'https://reactnative.dev/' }} />
);

WebView allows you to easily display external content that you want to integrate into your application. This is especially useful for in-app payment pages or viewing external documents.

Github Repo: React Native Webview

7. Data Management: Data Fetching with @tanstack/react-query

When your application exchanges data with APIs, you can simplify data fetching and caching by using @tanstack/react-query. React Query manages API requests and provides automatic retry and caching functionalities.

Fetching Data with React Query:

Installation:

npm install @tanstack/react-query

Example Usage:

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

const fetchData = async () => {
  const { data } = await axios.get('https://api.example.com/data');
  return data;
};

const MyComponent = () => {
  const { data, isLoading } = useQuery(['data'], fetchData);

  if (isLoading) return <Text>Loading...</Text>;
  return <Text>{data.title}</Text>;
};

React Query allows you to manage data requests more effectively. Additionally, with react-query-devtools, you can visually monitor and analyze the state of your queries.

Github Repo: TanStack Query

8. Navigation: Screen Transitions with react-navigation

In React Native applications, react-navigation is used for transitioning between screens. It is ideal for navigating between multiple screens, opening modals, and handling stacked navigation.

Using react-navigation:

Installation:

npm install @react-navigation/native
npm install @react-navigation/stack

Example Usage:

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const MyStack = () => (
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  </NavigationContainer>
);

Navigation is a critical component in modern mobile applications, and react-navigation is one of the most commonly used solutions for screen transitions.

Github Repo: React Navigation

9. API Requests: Fetching Data with Axios and Ky

The two most commonly used libraries for managing API requests are Axios and Ky. Both provide simple and efficient solutions for making HTTP requests.

Making an API Request with Axios:

Installation:

npm install axios

Example Usage:

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

Github Repo: Axios

Making an API Request with Ky:

Installation:

npm install ky

Example Usage:

import ky from 'ky';

ky.get('https://api.example.com/data').json()
  .then(data => console.log(data));

Github Repo: Ky

Both libraries can be used for data exchange with APIs, and each offers different advantages. Axios provides a broader API and more flexibility, while Ky is lighter and has a more modern structure.

10. Form Management and Validation: Powerful Forms with react-hook-form and Zod

For form management and validation, react-hook-form and Zod can be used. These tools allow you to manage form data more securely and flexibly.

Form Management with react-hook-form:

Installation:

npm install react-hook-form

Example Usage:

import { useForm } from 'react-hook-form';

const MyForm = () => {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name')} placeholder="Name" />
      <input type="submit" />
    </form>
  );
};

Github Repo: React Hook Form

Form Validation with Zod:

Installation:

npm install zod

Example Usage:

import { z } from 'zod';

const schema = z.object({
  name: z.string().min(2, 'Name must be at least 2 characters long'),
});

schema.parse({ name: 'Abdulnasır olcan' });
schema.parse({ name: 'A' });

Github Repo: Zod

While react-hook-form is optimized for managing and validating forms, Zod makes form validation even more powerful.

11. Strong Type Checking with TypeScript

TypeScript is a programming language built on top of JavaScript, providing static type checking. By using TypeScript in React Native projects, you can achieve a safer and more error-free development process.

React Native with TypeScript:

Installation:

npx react-native init MyApp --template react-native-template-typescript

Example Usage:

type User = {
  id: number;
  name: string;
};

const getUser = (user: User): string => {
  return User: ${user.name};
};

TypeScript helps identify errors early, especially in large projects, and makes your code more maintainable.

12. Debugging and Performance Monitoring with Reactotron

Reactotron is a powerful tool that simplifies debugging, monitoring API requests, and tracking performance in React Native projects. With Reactotron, you can monitor your application's performance and quickly resolve issues.

Reactotron Setup:

Installation:

npm install reactotron-react-native

Example Usage:

// queryClientConfig.js

import { QueryClient } from '@tanstack/react-query';

// Initialize Query Client
export const queryClient = new QueryClient();

// ReactotronConfig.js

import Reactotron from 'reactotron-react-native';
import mmkvPlugin from 'reactotron-react-native-mmkv';
import {
  QueryClientManager,
  reactotronReactQuery,
} from 'reactotron-react-query';
import config from './app.json';
import { queryClient } from './queryClientConfig';
import { MMKV } from 'react-native-mmkv';

// Initialize MMKV Storage
export const storage = new MMKV();

const queryClientManager = new QueryClientManager({
  queryClient,
});

// Configure Reactotron
Reactotron.configure({
  name: config.name,
  onDisconnect: () => {
    queryClientManager.unsubscribe();
  },
})
  .useReactNative()
  .use(mmkvPlugin({ storage })) // Use the MMKV plugin to store the Reactotron state
  .use(reactotronReactQuery(queryClientManager)) // Use the react-query plugin to store the Reactotron state
  .connect();

With Reactotron desktop, you can view the actions performed using react-native-mmkv and @tanstack/react-query.

Reactotron allows you to quickly identify issues in your project by monitoring API requests and error states through the developer console.

Github Repo: Reactotron

13. App Deployment: Automated Distribution with Fastlane

You can automate the process of publishing your React Native app on the App Store and Google Play using Fastlane. This tool automates tasks such as signing, versioning, and uploading the app to the store.

App Store and Google Play Process

Create an Android App Bundle (AAB):

cd android
./gradlew bundleRelease

This command compiles your project for Android and generates the AAB file.

Create a new app in the Google Play Console and upload your AAB file.

Fill in the app details, add screenshots and icons. Wait for your app to be published.

Uploading an App to the App Store

Archive your app via Xcode.
Go to App Store Connect and create a new app record.
Add the necessary information such as app icon, description, and screenshots.
Submit your app to the App Store and wait for Apple’s review process.

Deployment with Fastlane

Installation:

sudo gem install fastlane -NV

Example Usage Fastfile:

platform :ios do
  desc "App Store'a yükle"
  lane :deploy_to_appstore do
    increment_version_number
    build_app(scheme: "YourApp")
    upload_to_app_store
  end
end

platform :android do
  desc "Google Play'e yükle"
  lane :deploy_to_playstore do
    increment_version_code
    gradle(task: "bundleRelease")
    upload_to_play_store
  end
end

Fastlane allows you to upload your app to the stores without performing manual tasks each time you version your application.

Github Repo: Fastlane

Conclusion

React Native offers a revolutionary platform for modern mobile application development with its powerful and flexible structure. In this article, we covered the most essential tools and libraries you can use when developing applications with React Native. Mastering topics like dependency management, performance optimization, data management, form validation, TypeScript integration, and debugging tools will enable you to develop your projects more efficiently and securely. Happy coding! 🚀

DEV Community: Abdulnasır Olcan

Vue Composition API Pattern (Vue 3.5 and Practical Use Cases) 🚀

Why Use the Conditional Pattern?

Core Setup with Vue Composition API

Simple Reactive Example (JavaScript)

Simple Reactive Example (TypeScript)

Advanced Conditional Patterns

Conclusion

Mastering the Conditional React Hooks Pattern (With JavaScript and TypeScript Examples) 🚀

Why Do We Need the Conditional Hooks Pattern?

The Conditional React Hooks Pattern

Example 1: Scroll Lock Hook

JavaScript

TypeScript

Usage

Example 2: Combining Multiple Conditional Hooks

JavaScript

TypeScript

Usage

Example 3: Dynamic Event Listener

JavaScript

TypeScript

Usage

Best Practices

Conclusion

Backend for Frontend (BFF) Architecture 🚀

What is BFF and Why Use It?

Advantages of BFF

Project Architecture

Step-by-Step Implementation

1. Building the Backend Layer

Backend Structure:

Mobile BFF Example

Web BFF Example

2. Frontend Integration

Web Integration:

Mobile Integration:

3. Global State Management with Context API

Auth Context:

4. Navigation and Guards

Project Management

1. Makefile

Makefile Example:

2. Local API Redirection

Steps for API Redirection:

Android:

Conclusion

Project Benefits:

Project Code

React Native 0.76: The New Architecture That Takes Performance and Efficiency to the Next Level 🚀

Key Features:

1. Fabric Renderer

2. Turbo Modules and JSI

3. New Configuration: Codegen and Native Components

4. Enhanced Bridge

5. Enhanced Hermes Engine

6. Concurrent Rendering and Suspense Support

a. Suspense Support

7. New Event Loop and Performance Improvements

a. Automatic Batching:

8. useLayoutEffect Support

9. Enhanced iOS and Android Support

Conclusion

Vue 3.5 “Tengen Toppa Gurren Lagann” Innovations: Advanced Features and Most Powerful Updates 🚀

1. Reactivity System Enhancements

2. Reactive Props Destructure

3. SSR Improvements

a. Lazy Hydration

b. useId()

c. data-allow-mismatch

4. Custom Elements Enhancements

a. Accessing Element and Shadow Root with useHost and useShadowRoot

b. Creating a Basic Custom Element with defineCustomElement

c. Using Shadow DOM

5. useTemplateRef()

6. Deferred Teleport

7. onWatcherCleanup()

Next.js 15: New Features for High-Performance Development

1. Partial Pre-Rendering (PPR) with Detailed Use Case

2. Enhanced Caching Mechanisms

b. `useId()`

a. Accessing Element and Shadow Root with `useHost` and `useShadowRoot`

b. Creating a Basic Custom Element with `defineCustomElement`

5. `useTemplateRef()`

7. `onWatcherCleanup()`

3. `use()` Hook: Data Fetching and Context Management

Using the `use()` Hook for Data Fetching Without Creating Context

5. New `useFormStatus` and `useFormState` Hooks for Form Management

6. `ref` Callback Usage: Managing Refs in Parent-Child Relationships

7. Using `Suspense` for Concurrent Rendering

17. `useDeferredValue` with Initial Value