HardWrap

Optimized wrapper component that prevents unnecessary parent re-renders.

Description

The HardWrap component is similar to Wrap but provides additional optimization by preventing parent component re-renders. It uses React.memo internally and is particularly useful when you want to isolate state updates to specific parts of your component tree.

Input/Output

Input	Type	Description
children	(value: T) => React.JSX.Element	Render function that receives current state

Output	Type	Description
Returns	React.Component	Memoized React component that renders based on state

Example

import { signify } from 'react-signify';
import React from 'react';

const sExpensiveState = signify({ data: [], processing: false });
const sSimpleCounter = signify(0);

function ExpensiveParentComponent() {
  console.log('Parent component rendered'); // This should render less often
  
  return (
    <div>
      <h1>Expensive Component</h1>
      
      {/* Using HardWrap prevents parent re-renders */}
      <sExpensiveState.HardWrap>
        {(state) => (
          <div>
            <p>Processing: {state.processing ? 'Yes' : 'No'}</p>
            <p>Items: {state.data.length}</p>
            <button 
              onClick={() => sExpensiveState.set(({ value }) => {
                value.processing = !value.processing;
              })}
            >
              Toggle Processing
            </button>
          </div>
        )}
      </sExpensiveState.HardWrap>

      {/* Simple counter with HardWrap */}
      <sSimpleCounter.HardWrap>
        {(count) => (
          <div>
            <p>Counter: {count}</p>
            <button onClick={() => sSimpleCounter.set(count + 1)}>
              Increment
            </button>
          </div>
        )}
      </sSimpleCounter.HardWrap>
      
      <p>This text won't cause re-render when state changes above</p>
    </div>
  );
}