Remove UNSAFE_componentWillReceiveProps from JSONNestedNode

packages/react-json-tree/src/JSONNestedNode.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import JSONArrow from './JSONArrow';
 import getCollectionEntries from './getCollectionEntries';
@@ -97,144 +97,115 @@ interface Props extends CircularPropsPassedThroughJSONNestedNode {
   expandable: boolean;
 }
 
-interface State {
+function JSONNestedNode(props: Props) {
-  expanded: boolean;
+  const {
-}
+    getItemString,
+    nodeTypeIndicator,
+    nodeType,
+    data = [],
+    hideRoot,
+    createItemString,
+    styling,
+    collectionLimit,
+    keyPath,
+    labelRenderer,
+    expandable = true,
+    isCircular,
+    level = 0,
+    shouldExpandNode,
+  } = props;
 
-function getStateFromProps(props: Props) {
+  const [expanded, setExpanded] = useState<boolean>(() => {
-  // calculate individual node expansion if necessary
+    return !isCircular ? shouldExpandNode(keyPath, data, level) : false;
-  const expanded = !props.isCircular
+  });
-    ? props.shouldExpandNode(props.keyPath, props.data, props.level)
-    : false;
-  return {
-    expanded,
-  };
-}
 
-export default class JSONNestedNode extends React.Component<Props, State> {
+  // When certain props change, we need to re-compute whether our node should be in an expanded state
-  static propTypes = {
+  useEffect(() => {
-    getItemString: PropTypes.func.isRequired,
+    setExpanded(() => {
-    nodeTypeIndicator: PropTypes.any,
+      return !isCircular ? shouldExpandNode(keyPath, data, level) : false;
-    nodeType: PropTypes.string.isRequired,
+    });
-    data: PropTypes.any,
+  }, [isCircular, data, keyPath, level, shouldExpandNode]);
-    hideRoot: PropTypes.bool.isRequired,
-    createItemString: PropTypes.func.isRequired,
-    styling: PropTypes.func.isRequired,
-    collectionLimit: PropTypes.number,
-    keyPath: PropTypes.arrayOf(
-      PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-    ).isRequired,
-    labelRenderer: PropTypes.func.isRequired,
-    shouldExpandNode: PropTypes.func,
-    level: PropTypes.number.isRequired,
-    sortObjectKeys: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
-    isCircular: PropTypes.bool,
-    expandable: PropTypes.bool,
-  };
 
-  static defaultProps = {
+  // fixme - previously this was happening after a component should update
-    data: [],
+  // this should be moved to a useMemo and updated only when some props change
-    circularCache: [],
+  const renderedChildren =
-    level: 0,
+    expanded || (hideRoot && props.level === 0)
-    expandable: true,
+      ? renderChildNodes({ ...props, level: props.level + 1 })
-  };
+      : null;
 
-  constructor(props: Props) {
+  const itemType = (
-    super(props);
+    <span {...styling('nestedNodeItemType', expanded)}>
-    this.state = getStateFromProps(props);
+      {nodeTypeIndicator}
-  }
+    </span>
+  );
+  const renderedItemString = getItemString(
+    nodeType,
+    data,
+    itemType,
+    createItemString(data, collectionLimit),
+    keyPath
+  );
+  const stylingArgs = [keyPath, nodeType, expanded, expandable] as const;
 
-  UNSAFE_componentWillReceiveProps(nextProps: Props) {
+  const expandableLatest = useRef<boolean>(expandable);
-    const nextState = getStateFromProps(nextProps);
+  expandableLatest.current = expandable;
-    if (getStateFromProps(this.props).expanded !== nextState.expanded) {
+  const handleClick = useCallback(() => {
-      this.setState(nextState);
+    if (expandableLatest.current) {
+      setExpanded((prevValue) => !prevValue);
     }
-  }
+  }, []);
 
-  shouldComponentUpdate(nextProps: Props, nextState: State) {
+  return hideRoot ? (
-    return (
+    <li {...styling('rootNode', ...stylingArgs)}>
-      !!Object.keys(nextProps).find(
+      <ul {...styling('rootNodeChildren', ...stylingArgs)}>
-        (key) =>
+        {renderedChildren}
-          key !== 'circularCache' &&
+      </ul>
-          (key === 'keyPath'
+    </li>
-            ? nextProps[key].join('/') !== this.props[key].join('/')
+  ) : (
-            : nextProps[key as keyof Props] !== this.props[key as keyof Props])
+    <li {...styling('nestedNode', ...stylingArgs)}>
-      ) || nextState.expanded !== this.state.expanded
+      {expandable && (
-    );
+        <JSONArrow
-  }
+          styling={styling}
-
+          nodeType={nodeType}
-  render() {
+          expanded={expanded}
-    const {
+          onClick={handleClick}
-      getItemString,
+        />
-      nodeTypeIndicator,
+      )}
-      nodeType,
+      <label
-      data,
+        {...styling(['label', 'nestedNodeLabel'], ...stylingArgs)}
-      hideRoot,
+        onClick={handleClick}
-      createItemString,
+      >
-      styling,
+        {labelRenderer(...stylingArgs)}
-      collectionLimit,
+      </label>
-      keyPath,
+      <span
-      labelRenderer,
+        {...styling('nestedNodeItemString', ...stylingArgs)}
-      expandable,
+        onClick={handleClick}
-    } = this.props;
+      >
-    const { expanded } = this.state;
+        {renderedItemString}
-    const renderedChildren =
-      expanded || (hideRoot && this.props.level === 0)
-        ? renderChildNodes({ ...this.props, level: this.props.level + 1 })
-        : null;
-
-    const itemType = (
-      <span {...styling('nestedNodeItemType', expanded)}>
-        {nodeTypeIndicator}
       </span>
-    );
+      <ul {...styling('nestedNodeChildren', ...stylingArgs)}>
-    const renderedItemString = getItemString(
+        {renderedChildren}
-      nodeType,
+      </ul>
-      data,
+    </li>
-      itemType,
+  );
-      createItemString(data, collectionLimit),
-      keyPath
-    );
-    const stylingArgs = [keyPath, nodeType, expanded, expandable] as const;
-
-    return hideRoot ? (
-      <li {...styling('rootNode', ...stylingArgs)}>
-        <ul {...styling('rootNodeChildren', ...stylingArgs)}>
-          {renderedChildren}
-        </ul>
-      </li>
-    ) : (
-      <li {...styling('nestedNode', ...stylingArgs)}>
-        {expandable && (
-          <JSONArrow
-            styling={styling}
-            nodeType={nodeType}
-            expanded={expanded}
-            onClick={this.handleClick}
-          />
-        )}
-        <label
-          {...styling(['label', 'nestedNodeLabel'], ...stylingArgs)}
-          onClick={this.handleClick}
-        >
-          {labelRenderer(...stylingArgs)}
-        </label>
-        <span
-          {...styling('nestedNodeItemString', ...stylingArgs)}
-          onClick={this.handleClick}
-        >
-          {renderedItemString}
-        </span>
-        <ul {...styling('nestedNodeChildren', ...stylingArgs)}>
-          {renderedChildren}
-        </ul>
-      </li>
-    );
-  }
-
-  handleClick = () => {
-    if (this.props.expandable) {
-      this.setState({ expanded: !this.state.expanded });
-    }
-  };
 }
+
+JSONNestedNode.propTypes = {
+  getItemString: PropTypes.func.isRequired,
+  nodeTypeIndicator: PropTypes.any,
+  nodeType: PropTypes.string.isRequired,
+  data: PropTypes.any,
+  hideRoot: PropTypes.bool.isRequired,
+  createItemString: PropTypes.func.isRequired,
+  styling: PropTypes.func.isRequired,
+  collectionLimit: PropTypes.number,
+  keyPath: PropTypes.arrayOf(
+    PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  ).isRequired,
+  labelRenderer: PropTypes.func.isRequired,
+  shouldExpandNode: PropTypes.func,
+  level: PropTypes.number.isRequired,
+  sortObjectKeys: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
+  isCircular: PropTypes.bool,
+  expandable: PropTypes.bool,
+};