Why React-Based TypeScript Files Should Be Your Go-To for SPFx Applications

1,384 words, 7 minutes read time.

*Getting Started with SharePoint Framework (SPFx): Design and Build Engaging Intelligent Applications Using SharePoint Framework (English Edition)*

In the world of SharePoint development, the SharePoint Framework (SPFx) provides an excellent opportunity to extend the platform using modern client-side technologies. While SPFx allows you to use several technologies, including JavaScript and TypeScript, many developers today are making the shift toward using React-based TypeScript (TSX) files over traditional JavaScript class components. This shift has proven to improve productivity, simplify the development process, and lead to more maintainable, scalable applications.

In this blog post, we’ll explore the reasons why you should consider using React-based TypeScript files over JavaScript classes in your SPFx applications. Along the way, we’ll highlight some key advantages and disadvantages of this approach, and we’ll include practical examples from the development of a vehicle checkout calendar web part to showcase the benefits in action.

Introduction

The SharePoint Framework (SPFx) allows developers to build powerful, client-side web parts and extensions that interact seamlessly with SharePoint. Traditionally, developers would use JavaScript class components to manage their SPFx solutions. However, with the advent of React, and more specifically React hooks, a new way of building SPFx applications has emerged. Developers are now increasingly adopting React and TypeScript (TSX) for creating modern, functional, and reusable components in SPFx projects.

In this blog, we’ll dive into the reasons why React-based TSX files should be your go-to for SPFx applications. From simplicity and readability to enhanced performance, there are many compelling reasons to embrace this approach.

What is SPFx?

Before we dive into the specifics of React and TypeScript, let’s first review what SPFx is and why it’s useful. The SharePoint Framework (SPFx) is a development framework for building custom solutions for SharePoint. It’s designed to be used with client-side technologies like JavaScript and TypeScript, as well as libraries like React. SPFx allows developers to create web parts, extensions, and applications that run directly within SharePoint, providing a seamless experience for users.

Unlike older SharePoint customization models that relied on server-side code (e.g., using C#), SPFx solutions are entirely client-side, providing faster load times, more interactivity, and greater flexibility. SPFx also integrates well with modern JavaScript tooling, making it easier for developers to work with libraries like React and TypeScript.

Why React-Based TSX Over JavaScript Classes?

Simplified Code with React Hooks

When building SPFx solutions using React, one of the most noticeable differences is the use of React hooks. React hooks, such as useState, useEffect, and useContext, provide a much cleaner and more intuitive way to manage state and side effects in functional components.

Consider this snippet from the Vehicle Checkout Calendar application:

const [checkouts, setCheckouts] = useState<CheckoutItem[]>([]);

useEffect(() => {
  const fetchData = async (): Promise<void> => {
    try {
      const response = await props.context.spHttpClient.get(
        `${props.context.pageContext.site.absoluteUrl}/_api/web/lists(guid'${props.SPList}')/items?`,
        SPHttpClient.configurations.v1
      );
      const data = await response.json();
      setCheckouts(data.value);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  fetchData();
}, [props.SPList]); // Dependency array for updates

Here, we are using the useState hook to manage the checkouts array, which stores data about vehicle checkouts. Additionally, the useEffect hook is responsible for fetching data from SharePoint and updating the component’s state.

This pattern of managing state and side effects is much simpler than the older class-based approach, where developers had to rely on lifecycle methods such as componentDidMount or componentWillUnmount. With React hooks, you can manage component lifecycle events more declaratively, making the code easier to read, write, and maintain.

Reusability and Modularity

Another key advantage of React functional components is reusability. Since React encourages building small, focused components that each handle a single responsibility, you can easily break up your application into smaller, more modular pieces. This leads to better separation of concerns and cleaner, more maintainable code.

In our vehicle checkout calendar example, we could easily separate out the logic for fetching the vehicle data into a custom hook, like so:

const useVehicleCheckouts = (listId: string) => {
  const [checkouts, setCheckouts] = useState<CheckoutItem[]>([]);

  useEffect(() => {
    const fetchCheckouts = async () => {
      const url = `${props.context.pageContext.site.absoluteUrl}/_api/web/lists(guid'${listId}')/items`;
      const response = await props.context.spHttpClient.get(url, SPHttpClient.configurations.v1);
      const data = await response.json();
      setCheckouts(data.value);
    };

    fetchCheckouts();
  }, [listId]);

  return checkouts;
};

This hook can then be reused across different components or projects, saving time and reducing redundancy. With class-based components, it’s harder to extract reusable logic without creating additional complexity.

By breaking up the functionality into smaller components or hooks, you can more easily manage changes and scale your application as your needs grow.

Type Safety with TypeScript

TypeScript plays a crucial role in making SPFx development more robust by adding type safety. TypeScript helps prevent runtime errors by ensuring that your data structures match the expected types at compile time. This is particularly useful in large SPFx applications that need to interact with various SharePoint APIs.

Consider the following TypeScript interfaces used to define the structure of a vehicle checkout item and vehicle data:

interface Vehicle {
  Make: string;
  Model: string;
  Year: number;
  Color: string;
}

interface CheckoutItem {
  Title: string;
  CheckoutDate: string;
  ExpectedReturnDate: string;
  Vehicle: Vehicle;
}

By defining the CheckoutItem and Vehicle interfaces, TypeScript ensures that any data retrieved from SharePoint or passed into components adheres to the expected structure. This helps catch errors early in the development process, rather than discovering them at runtime.

For example, if you tried to pass a CheckoutItem without a Vehicle object or with an incorrect CheckoutDate, TypeScript would flag this as an error before your code is even run, saving you time and frustration during debugging.

Enhanced Performance and Efficient Rendering

One of the benefits of React’s component-based architecture is efficient rendering. React’s virtual DOM ensures that the UI only updates when necessary. When the state of a component changes, React compares the new state with the previous one and only updates the DOM where there are differences. This makes rendering more efficient and improves overall application performance.

In the example we’re working with, the calendar displays vehicle checkouts, and when new data is fetched from SharePoint, React will automatically re-render the affected components, but without causing unnecessary re-renders across the entire application. This fine-grained control over rendering helps optimize performance, especially in applications that deal with large datasets.

Compatibility with Modern JavaScript Ecosystem

React-based TSX files integrate well with modern JavaScript libraries and tools. For instance, in the Vehicle Checkout Calendar example, we use FullCalendar, a powerful calendar library, in combination with React:

<FullCalendar
  plugins={[dayGridPlugin]}
  initialView="dayGridMonth"
  events={checkouts.map((checkout) => ({
    title: `${checkout.Vehicle.Year} ${checkout.Vehicle.Color} ${checkout.Vehicle.Make} ${checkout.Vehicle.Model}`,
    start: checkout.CheckoutDate,
    end: checkout.ExpectedReturnDate,
    allDay: true,
  }))}
/>

React allows you to easily embed third-party libraries like FullCalendar into your application. You can pass data to the calendar component through props, and React will efficiently update the calendar view when the data changes. This would be much more complex if you were relying on JavaScript class components, as integrating third-party libraries and managing their state often requires more boilerplate code.

Advantages and Disadvantages of Using React-Based TSX in SPFx

Advantages:

Simplicity and Clean Code: React hooks and functional components reduce complexity and make your code more readable and maintainable.
Reusability: Components and logic are easier to modularize and reuse across your application.
Type Safety: TypeScript helps prevent errors by ensuring that data structures adhere to the expected types, improving reliability.
Performance Optimization: React’s virtual DOM and efficient update mechanism enhance performance, especially in large applications.
Compatibility with Modern Tools: React works seamlessly with popular JavaScript libraries like FullCalendar, making it easy to build feature-rich SPFx solutions.

Disadvantages:

Learning Curve: Developers who are new to React or TypeScript may face an initial learning curve.
Overhead for Simple Applications: For very simple SPFx web parts, using React and TypeScript may introduce unnecessary complexity.
Tooling Setup: Setting up the development environment with React, TypeScript, and SPFx requires more configuration compared to using plain JavaScript.

Conclusion

In conclusion, React-based TypeScript (TSX) files offer a modern, efficient, and scalable way to build SPFx applications. The combination of React’s hooks, TypeScript’s type safety, and the modularity of functional components makes this approach the best choice for most SPFx projects. Whether you’re building simple or complex web parts, React and TypeScript provide the tools you need to write cleaner, more maintainable, and high-performing applications.

If you haven’t yet adopted React-based TSX in your SPFx projects, now is the perfect time to make the switch and experience the benefits of modern web development firsthand.

bdking71

Sources

Disclaimer:

The views and opinions expressed in this post are solely those of the author. The information provided is based on personal research, experience, and understanding of the subject matter at the time of writing. Readers should consult relevant experts or authorities for specific guidance related to their unique situations.