Valtio Library

• Valtio is a state management library for React applications.
• Valtio library is easy to use better than useSate hook.

Steps valtio

1. Install the Valtio library in your React project using a package manager like npm or yarn.
2. Create a proxy object using Valtio to represent your application's state.
3. Use the proxy object to manage state changes in any component without the need for complex state management logic.
4. If necessary, integrate Valtio with the useContext hook to share state across components.

Valtio into your React application, you can simplify state management and enhance the overall maintainability of your codebase."

Step 1]: Installation

Use a package manager like npm install the "Valtio" library.

npm install valtio

Step 2]: Create provider component

• proxy and useSnapshot are from a library called 'valtio,' which is used for state management.
• we are going to import the proxy and useSnapshot the function from Valtio. The proxy function is used for creating a new proxy state.

import {createContext, useContext, useRef} from 'react';
import {proxy, useSnapshot} from 'valtio';
import * as PropTypes from 'prop-types';

// 1) CREATE A CONTEXT
const MainContext = createContext();

const DashboardProvider = ({children}) => {
    const state = useRef(
        proxy({
            rootMainObject: {
                name: 'ABC',
                email: 'text@abc.com',
            },
        }),
    ).current;

    return (
        // 2) PROVIDE VALUE TO CHILD COMPONENTS
        <MainContext.Provider value={state}>{children}</MainContext.Provider>
    );
};

DashboardProvider.propTypes = {children: PropTypes.any};

export default DashboardProvider;

export const useMainContext = () => {
    const dashboardState = useContext(MainContext);
    if (dashboardState === undefined) {
        throw new Error('MainContext was used outside of the DashboardProvider');
    }

    const dashboardSnapshot = useSnapshot(dashboardState);
    return {dashboardState, dashboardSnapshot};
};

Step 3] : Use DashboardProvider & wrap the component

• The dashboardProvider are use in parent component.
• Parent component are wrapped in dashboardProvider.

import React from 'react';
import {MainDashboard} from './MainDashboard';
import {DashboardProvider} from './DashboardProvider';

const Dashoard = () => {
    return (
            <DashboardProvider>
                <MainDashboard />
            </DashboardProvider>
    );
};

export default Dashoard;

Step 4]: Use dashboardState & dashboardSnapshot in child component.

Use dashboardState & dashboardSnapshot for handle the state in child component

• The dashboardState hook returns a change value of the state.
• The dashboardSnapshot hook returns a read-only snapshot of the state.

import {Button, Card, Space} from 'antd';
import './MainDashboardIndex.less';
import {useMainContext} from '../DashboardProvider/DashboardProvider';

const MainDashboardIndex = () => {
    const {dashboardState, dashboardSnapshot: {rootMainObject}} = useMainContext();

    return (
        <Space direction={'horizontal'}>
            <Card>
                <Space direction={'horizontal'}>
                    <Button onClick={() => {
                        dashboardState.rootMainObject.name = 'XYZ';
                    }}>
                      Change name
                    </Button>
                </Space>
            </Card>
            Name - {rootMainObject?.name}
        </Space>
    );
};

export default MainDashboardIndex;