---
title: "React Best Practices"
framework: react
version: "2.1.2"
---

# React Best Practices

This page explains best practices for using React with AG Studio.

## Data Sources

When setting data sources, we recommend using `useState` to maintain a consistent reference across renders.

```jsx
const App = () => {
    const [data, setData] = useState({
        sources: [{
            id: 'medals',
            data: [
                {
                    year: 2000,
                    sport: 'Swimming',
                    country: 'United States',
                    // ... other fields
                },
                // ... other rows
            ],
        }],
    });

    return <AgStudio data={data} />;
};
```

If you do NOT use `useState` and define the data within your component, then Studio will be provided with new data sources each time the component is rendered. This will result in additional Studio renders, and if using synchronous data sources, will result in all the data being recalculated.

For applications that are not using synchronous data source, or do not update data, then `useMemo` is a valid alternative to `useState`.

## Object Properties

For all properties that are objects (e.g. `panels`, `layout` and `overrides`), we recommend `useState` or `useMemo`. If you do not use these hooks, then you risk resetting the relevant state in Studio each time a render occurs.

## Simple Properties

Properties of simple types (string, boolean and number) do not need to use hooks as they are compared by value across renders.

## Callbacks

For [Studio Properties](https://www.ag-grid.com/studio/react/studio-properties/) that accept functions, we strongly recommend you use `useCallback` to avoid resetting Studio state on every render.

When using `useCallback()`, make sure you set correct dependencies in order to avoid stale closures.

## Event Listeners

For [Event Listeners](https://www.ag-grid.com/studio/react/studio-events/) there is no requirement to use `useCallback` as event handlers do not trigger updates within Studio. However, you may find it easier to be consistent with callbacks and just always use `useCallback`.

If you do use `useCallback()`, make sure you set correct dependencies in order to avoid stale closures.