strictStateMode

• strictStateMode(value?: boolean): void

• From 5.20241.19, React interop now supports strict state mode. This means that on each re-render cycle, all of the component properties get synced with their values provided in the JSX. Setting properties via JSX will make that prop externally controlled, and changing its value will be allowed only by updating the state variables passed in JSX.

  By default, this option is set to false to maintain compatibility with existing user applications. If users want to utilize the Wijmo API in accordance with React's state management philosophy, they can set strictStateMode to true.

  When the strictStateMode flag is false, the value of the underlying component gets synced only when the prop value changes and not when the component re-renders. This makes it possible for JSX to become out of sync with the rendered state.

  Consider the following: if you set the value on an input control like InputDate and if strictStateMode is false, it is possible to select a different value in the control. After the value is selected, there is a mismatch between the React-provided state and the rendered state. This leads to potential bugs. That is why React recommends using controlled components. In controlled components, once the value is provided externally via JSX, the control value is not allowed to change unless the externally provided value is changed itself. So in the above scenario (for strictStateMode = true), to be able to change the value, we need to handle the valueChanged event and update the state variable to update the controlled value.

  function App() {
    const [date, setDate] = useState(new Date());
  
    return (
      <div>
        <InputDate value={date} valueChanged={(s) => setDate(s.value)} />
      </div>
    );
  }

  Parameters

  • Optional value: boolean

    Whether to use the strict state mode or not

  Returns void