React Embedded AnalyticsReact Best Practices

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

Data Sources Copy Link

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

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 Copy Link

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 Copy Link

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

Callbacks Copy Link

For 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 Copy Link

For Event Listeners 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.