Add React props hook.

[dmjio]

props hook 🪝

This is useful for a descendant Component to react to changes in its parent Component. Currently, hooks just alter the child View, without invoking the update function. Like mount / unmount, the props phase allows one to "hook" into props as they alter over time and process an action in response to these changes.

This further aligns miso w/ React specification parity. The props phase is an action that executes post Component draw. It receives both old props and new props as arguments.

Sharing should be preserved between old and new props.

-- defaults to 'Nothing'

-- | Interface proposal
onPropsChanged :: Maybe (props -> props -> action)
               -- ^ old   ^ new

-- | Example 'Action'
data Action = PropsChanged ButtonProps ButtonProps

-- | Example usage
test :: Component parent ButtonProps model Action
test = myComponent { onPropsChanged = Just PropsChanged }

• Extend 'Component' to receive props phase callback function
• Add prevComponentProps
• Extend ComponentState with _componentPropsPhase
• Add prevComponentProps Lens.

The analog in React would be to track the previous props manually using a hook (useRef).

import { useEffect, useRef } from 'react';

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  }, [value]);
  return ref.current;
}

// Usage in your component
function MyComponent({ userId }) {
  const prevUserId = usePrevious(userId);

  useEffect(() => {
    if (prevUserId !== userId) {
      console.log(`User ID changed from ${prevUserId} to ${userId}`);
      // Fetch new user data here
    }
  }, [userId, prevUserId]);
}