@bytesoftio/isolate v1.0.0

@bytesoftio/isolate

Installation

yarn add @bytesoftio/isolate or npm install @bytesoftio/isolate

Table of contents

• Description
• Usage

Description

This package provides a tiny component Isolate that allows you to isolate other components from unnecessary re-renders.

Usage

Take this component for example, the children of the Isolate component will only re-render when the observedValue changes. Changes to the ignoredValue will not lead to re-renders of the isolated children.

import React, { useState } from "react"
import { Isolate } from "@bytesoftio/isolate"

const Component = () => {
  const [ignoredValue, setIgnoredValue] = useState(0)
  const [observedValue, setObservedValue] = useState(0)

  return (
    <div>
      <h1>ignored value: {ignoredValue}</h1>

      <Isolate deps={[observedValue]} showRenders>
        <h2>ignored value: {ignoredValue}</h2>
        <h2>observed value: {observedValue}</h2>
      </Isolate>
    </div>
  )
}