diff --git a/packages/react-json-tree/src/JSONNestedNode.tsx b/packages/react-json-tree/src/JSONNestedNode.tsx index e8dbb261..5256ecf6 100644 --- a/packages/react-json-tree/src/JSONNestedNode.tsx +++ b/packages/react-json-tree/src/JSONNestedNode.tsx @@ -145,11 +145,12 @@ export default class JSONNestedNode extends React.Component { this.state = getStateFromProps(props); } - UNSAFE_componentWillReceiveProps(nextProps: Props) { + static getDerivedStateFromProps(nextProps: Props, state: State): State | null { const nextState = getStateFromProps(nextProps); - if (getStateFromProps(this.props).expanded !== nextState.expanded) { - this.setState(nextState); + if (nextState.expanded !== state.expanded) { + return nextState; } + return null; } shouldComponentUpdate(nextProps: Props, nextState: State) { diff --git a/packages/react-json-tree/src/index.tsx b/packages/react-json-tree/src/index.tsx index 50a5524b..70cfffdd 100644 --- a/packages/react-json-tree/src/index.tsx +++ b/packages/react-json-tree/src/index.tsx @@ -16,13 +16,15 @@ import { } from 'react-base16-styling'; import { CircularPropsPassedThroughJSONTree } from './types'; -interface Props extends CircularPropsPassedThroughJSONTree { - data: any; +interface ThemesConf { theme?: Theme; - invertTheme: boolean; + invertTheme?: boolean; +} +interface Props extends CircularPropsPassedThroughJSONTree, ThemesConf { + data: any; } -interface State { +interface State extends ThemesConf { styling: StylingFunction; } @@ -133,14 +135,16 @@ export default class JSONTree extends React.Component { this.state = getStateFromProps(props); } - UNSAFE_componentWillReceiveProps(nextProps: Props) { + static getDerivedStateFromProps(nextProps: Props, state: State): State | null { if ( ['theme', 'invertTheme'].find( - (k) => nextProps[k as keyof Props] !== this.props[k as keyof Props] + (k) => nextProps[k as keyof ThemesConf] !== state[k as keyof ThemesConf] ) ) { - this.setState(getStateFromProps(nextProps)); + return getStateFromProps(nextProps); } + + return null; } shouldComponentUpdate(nextProps: Props) {