DevExtreme React - State Management

React.js offers two ways to access and influence your components' state and content.

Components that use the controlled state management mode delegate data storage and state management to other entities. Such components use props to receive data from their parents, and callbacks to notify their parent of state updates. The official React documentation recommends this technique for most users.

Components that use the uncontrolled state management mode are self-contained. Like traditional HTML, they store data directly inside the DOM. You can use refs to access this data.

To manage the state of a controlled component, use the component's props. In the example below, the parent of the TextBox component determines the value property of its child.

DevExtreme components raise events in response to user interaction. The names of these events include the name of the property that changed. For example, when the user changes the value property, the component raises the onValueChange event. The handler for this event accepts the new property value as a parameter.

Handle component events to update the parent component's state. Note: components don't fire events when you update component data programmatically.

import React, { useState } from 'react';
import 'devextreme/dist/css/dx.light.css';
import TextBox from 'devextreme-react/text-box';

const App = () => {
const [text, setText] = useState('TEXT');

const handleValueChange = (value) => {
    setText(value.toUpperCase());
};

return (
    <div>
    <TextBox
        value={text}
        onValueChange={handleValueChange}
        valueChangeEvent="input"
    />
    <br />
    <div>{text}</div>
    </div>
);
};

export default App;

Uncontrolled DevExtreme components maintain and update their own state.

To specify an initial property value in this mode, add the default prefix to property names. The following code snippet defines an initial currentDate value using the defaultCurrentDate property:

import { Scheduler } from 'devextreme-react/scheduler';

const currentDate = new Date();

function App() {
    return (
        <Scheduler ...
            defaultCurrentDate={currentDate}
        />
    );
};