React-Refresh

A utility library for handling object state updates in React components.

React's useState hook triggers re-renders when the state value changes. However, when you mutate properties of an object without replacing the whole object, React does not detect the change. react-refresh provides a simple context and hook API to force re-renders on demand.

Peer Dependency: React (>=16.8)

Package: [email protected]

Features

• RefreshProvider component to wrap parts of your app.
• useRefresh hook to access a refresh() function.
• Calling refresh() forces a re-render of all components under the provider.

Installation

npm install react-refresh
# or
yarn add react-refresh

Usage

Wrap your application (or any subtree) with RefreshProvider:

import React from 'react';
import ReactDOM from 'react-dom';
import { RefreshProvider } from 'react-refresh';
import App from './App';

ReactDOM.render(
  <RefreshProvider>
    <App />
  </RefreshProvider>,
  document.getElementById('root')
);

In any component under the provider, use the useRefresh hook:

import React from 'react';
import { useRefresh } from 'react-refresh';

type Data = { name: string; [key: string]: any };

function MyComponent({ data }: { data: Data }) {
  const { refresh } = useRefresh();

  const handleChange = () => {
    // Mutate object properties...
    data.name = 'New Name';
    // Force React to re-render to pick up changes
    refresh();
  };

  return (
    <div>
      <span>{data.name}</span>
      <button onClick={handleChange}>Change Name</button>
    </div>
  );
}

API

RefreshProvider

A React context provider that exposes the refresh function to its children.

Props:

• children: React.ReactNode – Components that should be able to trigger a refresh.

useRefresh

Hook to access the refresh() function.

Returns:

• { refresh: () => void } – Call refresh() to force a re-render of the provider's subtree.

Limitations

• Calling refresh() forces a full re-render of the provider's subtree; use it judiciously to avoid performance issues.

Development

git clone <repo-url>
cd react-refresh
npm install
npm run build
npm test

Build

npm run build

Test

Tests are written using Jest and react-test-renderer.

npm test

License

MIT