Remove UNSAFE_componentWillReceiveProps from react-json-tree

[defunctzombie]

Reworking of https://github.com/reduxjs/redux-devtools/pull/644 to remove UNSAFE_componentWillReceiveProps which is deprecated in react 17 and likely removed in 18.

Components that used UNSAFE_componentWillReceiveProps are converted to functional components with hooks.

[Methuselah96]

@defunctzombie Looks like there are some type errors:

Error: src/JSONArrayNode.tsx(21,4): error TS2322: Type '{ data: any; nodeType: string; nodeTypeIndicator: string; createItemString: (data: any) => string; expandable: boolean; styling: StylingFunction; keyPath: (string | number)[]; ... 12 more ...; children?: ReactNode; }' is not assignable to type 'Pick<Props, "nodeType" | "styling" | "keyPath" | "labelRenderer" | "valueRenderer" | "circularCache" | "level" | "isCircular" | "shouldExpandNode" | "hideRoot" | "getItemString" | ... 6 more ... | "expandable">'.
  Types of property 'circularCache' are incompatible.
    Type 'any[] | undefined' is not assignable to type 'any[]'.
      Type 'undefined' is not assignable to type 'any[]'.
Error: src/JSONIterableNode.tsx(33,6): error TS2741: Property 'expandable' is missing in type '{ nodeType: string; nodeTypeIndicator: string; createItemString: (data: any, limit: number) => string; data: any; styling: StylingFunction; keyPath: (string | number)[]; ... 12 more ...; children?: ReactNode; }' but required in type 'Pick<Props, "nodeType" | "styling" | "keyPath" | "labelRenderer" | "valueRenderer" | "circularCache" | "level" | "isCircular" | "shouldExpandNode" | "hideRoot" | "getItemString" | ... 6 more ... | "expandable">'.
Error: src/JSONObjectNode.tsx(20,4): error TS2322: Type '{ data: any; nodeType: string; nodeTypeIndicator: string; createItemString: (data: any) => string; expandable: boolean; styling: StylingFunction; keyPath: (string | number)[]; ... 12 more ...; children?: ReactNode; }' is not assignable to type 'Pick<Props, "nodeType" | "styling" | "keyPath" | "labelRenderer" | "valueRenderer" | "circularCache" | "level" | "isCircular" | "shouldExpandNode" | "hideRoot" | "getItemString" | ... 6 more ... | "expandable">'.
  Types of property 'circularCache' are incompatible.
    Type 'any[] | undefined' is not assignable to type 'any[]'.
      Type 'undefined' is not assignable to type 'any[]'.

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: cf6612790b7b707717cdd60aa8ddf52c0b80e001

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[defunctzombie]

@Methuselah96 I looked at the types here and can't make sense of where this error comes from or what the intended behavior is. I did not change any of the Prop types in this PR.

The error comes from a miss-match between these two types:

https://github.com/reduxjs/redux-devtools/blob/main/packages/react-json-tree/src/types.ts#L54 https://github.com/reduxjs/redux-devtools/blob/main/packages/react-json-tree/src/types.ts#L65

One being optional for circularCache.

[Methuselah96]

Previously, circularCache was defaulted to an empty array in JSONNestedNode if it wasn't provided, however it looks like this PR does not initialize the circular cache (and perhaps also fails to update it?).

[defunctzombie]

Even if I updated JSONNestedNode to set a default for circularCache, that doesn't prevent the error. The issue is that JSONArrayNode props are of type CircularPropsPassedThroughJSONNode which extend JSONNestedNodeCircularPropsPassedThroughJSONNode which has circularCache?: any[]; however JSONNestedNode props are CircularPropsPassedThroughJSONNestedNode which extend JSONNestedNodeCircularPropsPassedThroughJSONNestedNode which has circularCache: any[];.

So when JSONArrayNode does <JSONNestedNode {...props} ...etc circularCache types don't match since JSONNestedNode doesn't allow undefined for circularCache. Its possible that the defaultProps from before is treated as turning circularCache: any[] into circularCache?: any[] even tho the Props type does not allow circularCache to be undefined.

The two fixes are:

• add circularCache={props.circularCache ?? emptyArray} to JSONArrayNode's use of JSONNestedNode
• update the Props for JSONNestedNode to allow circularCache to be optional

Preferences?

[Methuselah96]

Right, if a prop is specified in defaultProps then TypeScript will make that prop optional when the component is used.

Option 1 is not preferable because JSONArrayNode is not the only component that uses JSONNestedNode (JSONIterableNode and JSONObjectNode do as well). Option 2 sounds good to me (accompanied with actually defaulting circularCache to an empty array and updating it appropriately).

[defunctzombie]

I've updated the typescript prop types to reflect allowing undefined.

[defunctzombie]

@Methuselah96 anything else that I need to do on this PR before it can be merged?

[unematiii]

@Methuselah96 @defunctzombie Is any of you still working on it?

[Methuselah96]

I am not currently working on it.

[defunctzombie]

I too am not currently working on this.

[BENcorry]

i wanna to ask which version has fixed this problem

[Methuselah96]

It has not been resolved yet, but I am working on a fix that I hope will be released within the next week.