Merge pull request #380 from plotly/refactor/functional-component

Refactor: Migrate to function components

Author: KoolADE85

CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to `dash-ag-grid` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 Links "DE#nnn" prior to version 2.0 point to the Dash Enterprise closed-source Dash AG Grid repo
 
+## UNRELEASED
+
+### Changed
+- Component is refactored to be a function component rather than a class
+
 ## [32.3.0rc0] - 2025-04-15
 
 ### Fixed

package-lock.json

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import LazyLoader from '../LazyLoader';
-import React, {Component, lazy, Suspense} from 'react';
+import React, {lazy, Suspense, useState, useCallback, useEffect} from 'react';
 
 const RealAgGrid = lazy(LazyLoader.agGrid);
 const RealAgGridEnterprise = lazy(LazyLoader.agGridEnterprise);
@@ -12,55 +12,46 @@ function getGrid(enable) {
 /**
  * Dash interface to AG Grid, a powerful tabular data component.
  */
-class DashAgGrid extends Component {
-    constructor(props) {
-        super(props);
+function DashAgGrid(props) {
+    const [state, setState] = useState({
+        mounted: false,
+        rowTransaction: null,
+    });
 
-        this.state = {
-            mounted: false,
-            rowTransaction: null,
-        };
-
-        this.buildArray = this.buildArray.bind(this);
-    }
-
-    static dashRenderType = true;
-
-    buildArray(arr1, arr2) {
+    const buildArray = useCallback((arr1, arr2) => {
         if (arr1) {
             if (!arr1.includes(arr2)) {
                 return [...arr1, arr2];
             }
             return arr1;
         }
         return [JSON.parse(JSON.stringify(arr2))];
-    }
-
-    UNSAFE_componentWillReceiveProps(nextProps) {
-        if (this.props.rowTransaction && !this.state.mounted) {
-            if (nextProps.rowTransaction !== this.props.rowTransaction) {
-                this.setState({
-                    rowTransaction: this.buildArray(
-                        this.state.rowTransaction,
-                        this.props.rowTransaction
-                    ),
-                });
-            }
+    }, []);
+
+    useEffect(() => {
+        if (props.rowTransaction && !state.mounted) {
+            setState((prevState) => ({
+                ...prevState,
+                rowTransaction: buildArray(
+                    prevState.rowTransaction,
+                    props.rowTransaction
+                ),
+            }));
         }
-    }
+    }, [props.rowTransaction, state.mounted, buildArray]);
 
-    render() {
-        const {enableEnterpriseModules} = this.props;
+    const {enableEnterpriseModules} = props;
+    const RealComponent = getGrid(enableEnterpriseModules);
 
-        const RealComponent = getGrid(enableEnterpriseModules);
-        return (
-            <Suspense fallback={null}>
-                <RealComponent parentState={this.state} {...this.props} />
-            </Suspense>
-        );
-    }
+    return (
+        <Suspense fallback={null}>
+            <RealComponent parentState={state} {...props} />
+        </Suspense>
+    );
 }
 
+DashAgGrid.dashRenderType = true;
+
 DashAgGrid.defaultProps = {
     className: 'ag-theme-alpine',
     resetColumnState: false,