spitha

Spitha

A React Component Booster to Speed Rendering.
Explore the docs »

Homepage · Report Bug · Request Feature

Table of Contents

1. About The Project
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Contact

About Spitha

Spitha is React Component natively built in Typescript that does most of its work on the backend. It boosts rendering time of components by over 40% with improved Batching, Memoization, and Latency Update Technqiues. The component renders native data within 0.15 miliseconds and components within 0.12 miliseconds compared to the average React Component rendering times of 0.3 miliseconds. This is especially significant for applications that query and render API data and extensive visuals like graph networks.

For rendering native data, Spitha works exactly like any React Component. It can accept props, API calls, and etc, but with improved efficiency!

Similarly, for rendering components (i.e., Chakra Styling), just wrap it around a Spitha Component, and your React App will be optimized - it's that simple!

Spitha is available for both native React Frameworks as well as Frameworks using Typescript to allow all types of applications to be optimized.

(back to top)

Efficient Rendering Count

Spitha has improved State Management where it can verify if API data is already fetched or not. It fetches once per render unless stated other wise the fetchData prop. This in-turn means that while the user may call the API fetch function multiple times on React, Spitha will run it only once. However, to ensure the data rendered is up-to-date, Spitha runs an Asynchronous Loading protocol that calls APIs when the user is not looking at the component (i.e., scrolled down is not indirectly looking at the component).

There has also been an improved Memoization technique employed in Spitha. It ensures the same callback instance is reused across renders and prevents unnecessary re-creation of the function.

Spitha can also be customizable in how it can accept rendering. There is a trigger prop which represents a threshold. This threshold represents the distance the user has to be away from the component for it re-render. Such an Example can be viewed in the Examples Section.

Note: Performance and method of testing can be found in the \testing directory or here:

Getting Started

To start using Spitha, follow these 3 steps.

Prerequisites

Setup your React Framework.

npx create-next-app IloveSpitha --typescript

Installation

After you have setup your project, make sure you have installed the spitha library.

1. Go to your React Configuration file and ensure you have webpack installed. If you're having errors with typescript, I recommend looking at this Stack Overflow Post for guidance.

   // next.config.mjs
   /** @type {import('next').NextConfig} */
        const nextConfig = {
        reactStrictMode: true,
        transpilePackages: ['spitha'] //Ensuring Webpack can convert TS package into JS
        };
   
        export default nextConfig;

2. Install the Spitha Package

   yarn install spitha

3. Import Spitha to your Component file

   //index.tsx 
   //....other modules
   import Spitha from 'spitha'

(back to top)

type MyComponentProps = { fetchData: () => Promise; initialData?: any[]; threshold?: number; children?: React.ReactNode; style?: React.CSSProperties; }

Usage

Spitha does come with a few props to customize the rendering performance. By default, it is set to maximize the performance, but the user may choose to send in props, apply css-styling, etc.

Spitha Props	Value
fetchData	Callback Function: Promise<any>
initialData?	any[] (optional)
threshold?	number (optional)
children?	React Object: React.ReactNode (optional)
style?	React Object: React.CSSProperties (optional)

Found below a few examples on how to use Spitha. Do note that these are basic implementations, and Spitha may work for most React applications.

Basic Data Implementation

    <div>
        <WelcomeComponent> Welcome to Spitha!</WelcomeComponent>
        <Text>React just got Faster!!!</Text>
        <h1>{`Test Component ${i + 1}`}</h1>
        <a href={`https://example.com/${i + 1}`}>Visit Test Component made with{i + 1}</a>
        <img src="image.jpg" alt="Image" />;
    </div> 

ChakraUI Component Rendering with Spitha

    import { Text } from "@chakra-ui/react";
    import { Spitha } from "spitha";

    export default function Home() {
    return (
        <div>
        <Spitha fetchData={() => Promise.resolve()}>
            <div>
            <Text fontSize='6xl'>React just got faster!!!</Text>
            <Text>Yayyyyyyyyyy</Text>
            </div>
        </Spitha>
        </div>
    );
    }

Changing Threshold

    <Spitha fetchData={() => Promise.resolve(['initialData'])} threshold={0.4} style={{ color: `#${i}${i}${i}` }}>
      <h1>{`Test Component ${i + 1}`}</h1>
      <a href={`https://example.com/${i + 1}`}>Visit Test Component {i + 1}</a>
      <img src="image.jpg" alt="Image" />;
    </Spitha>

Here, the threshold property is set to 0.4 which means Spitha will re-render when the user is 40% away from the component. Note that there has also a prop sent in the form of a promise initialData as a string.

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Jaival Patel | Spitha | Spitha Docs

(back to top)