conditionRendering

Method to set conditions for when components should re-render.

Description

The conditionRendering method allows you to control when connected React components should re-render based on the current state value. The callback function receives the current value and returns a boolean indicating whether rendering should occur.

Input/Output

Input	Type	Description
callback	(currentValue: T) => boolean	Function that determines if rendering should occur

Output	Type	Description
Returns	void	No return value

Example

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

const sUser = signify({ 
  name: 'John', 
  isVisible: true, 
  lastUpdate: Date.now() 
});

const sExpensiveData = signify({ 
  items: [], 
  isLoading: false, 
  renderCount: 0 
});

// Only render when user is visible
sUser.conditionRendering((value) => {
  return value.isVisible;
});

// Only render when not loading or when items change
sExpensiveData.conditionRendering((value) => {
  return !value.isLoading || value.items.length > 0;
});

function UserComponent() {
  const userData = sUser.use();
  
  return (
    <div>
      <h2>{userData.name}</h2>
      <p>Last updated: {new Date(userData.lastUpdate).toLocaleTimeString()}</p>
      
      <button 
        onClick={() => sUser.set(({ value }) => {
          value.lastUpdate = Date.now(); // Won't re-render if not visible
        })}
      >
        Update Time
      </button>
      
      <button 
        onClick={() => sUser.set(({ value }) => {
          value.isVisible = !value.isVisible;
        })}
      >
        Toggle Visibility
      </button>
    </div>
  );
}

function DataComponent() {
  const data = sExpensiveData.use();
  
  return (
    <div>
      <p>Items: {data.items.length}</p>
      <p>Render count: {data.renderCount}</p>
      
      <button 
        onClick={() => sExpensiveData.set(({ value }) => {
          value.renderCount++; // Won't re-render if loading
        })}
      >
        Increment Render Count
      </button>
    </div>
  );
}