react-use-smart-state
TypeScript icon, indicating that this package has built-in type declarations

1.0.4 • Public • Published

React useSmartState

useSmartState is just a useState on steroids.

For simple values like string, boolean, number works exactly the same as useState, but for objects it prevent from unnecessary updates

Getting started

yarn add react-use-smart-state

Usage

import React, { useState, useEffect } from 'react'
import { useSmartState } from 'react-use-smart-state'

interface IPerson {
    name: string
    lastname: string
    age: number
}

export const TestExample: React.FC<{}> = () => {
    const [value, setValue] = useSmartState<IPerson>({
        name: 'John',
        lastname: 'Doe',
        age: 50,
    })
    
    useEffect(() => {
        console.log('I am called only when really change')
        
        // calling this 10 times
        // setValue({ ...value, age: 52 })
        // will cause just one update
    }, [value])
    
    return (<div>
        Look how awsome it is!
        
        <div onClick={() => setValue({ ...value, age: 52 })}>Click Me</div>
    </div>)
}

/react-use-smart-state/

    Package Sidebar

    Install

    npm i react-use-smart-state

    Weekly Downloads

    0

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    29 kB

    Total Files

    14

    Last publish

    Collaborators

    • fookoo