By design when the state updates the UI should update.

However. If I return a brand new object, it will not update the UI.

  case 'clearArticleForm':
    let newState1 = {};
    return newState1;
  }

If I return a brand new object and populate it as follows I still can not get the UI to update.

const initial_state = {link:{}, image:{}, title:{}, summary:{}, tag:{}, domain:{}, valid: false};


  case 'clearArticleForm':
    let newState1 = initial_state;
    return newState1;
  }

However if I populate it this way, I will finally get the UI to update.

const initial_state = {link:{value:''}, image:{value:''}, title:{value:''}, summary:{value:''}, tag:{value:''}, domain:{value:''}, valid: false};

  case 'clearArticleForm':
    let newState1 = initial_state;
    return newState1;
  }

I though that by definition / design when the state changes the UI should update. What is going on here.

The state changes as I verified in the functional component however the UI does not until the 3rd example.

I have described the behavior for this case however I am looking for a rule and documentation so I understand the general case: induction.

Functional Component:

const data = useSelector((state) => state.ArticleForm) || {};

// ... snip

<M10 valid = {data.link.valid}     value = {data.link.value}    onChange={onChange} className = 'modal_article_input' placeholder="link"    name="link" />