Render react class component on route params change

Question

I used to work with functional components only so I am having a problem with class components life cycles. I need to rerender the class when the params id changes. I was able to change the params id with history.push(home/items/${id}) but as the route changes the page is not rerendering.

const getItems = () => {
      client
        .query({
          query: GET_ITEMS,
        })
        .then((result) =>
          this.setState({ items: result.data.items })
        );
    };

componentDidMount() {
    let { type } = this.props.match.params;
    this.setState({ type });

   getItems();
  }

componentDidUpdate(prevState) {
    let { type } = this.props.match.params;
    if (type !== prevState.type) {
      this.setState({ type });
    }
  }

render() {
    const { type } = this.props.match.params;

    return (
      <ul className={stl.list}>
            {this.state.items?.map(({ name }) => (
              <div>
                <li
                  style={this.state.type === name ? activeTabStyle : {}}
                  onClick={() => this.handleTabClick(name)}
                >
                  {name}
                </li>
                {this.state.type === name && <div className={stl.underline}></div>}
              </div>
            ))}
          </ul>
    );
  }

I tried to use componentDidUpdate which I think is the correct equivalent for useEffect(() => {}, [dependants]) but it gave me error saying max limit is met

I included componentDidUpdate which is giving error Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. My componentDidUpdate function might be wrong, because I need to rerender based on params id not prevState, prevProps. So I tried to set the params id to state and use componentDidUpdate.

you're right that `componentDidUpdate` is the correct method, please provide the code that's throwing the error and the full error text. also, afaik, you can do everything with function components, why are you reverting to the legacy class components? — szaman, Nov 10 '21 at 13:37
`useEffect(() => { ... }, [dependants])` works with `functional components` not with `class base component`. Show your full code. — Asif vora, Nov 10 '21 at 13:39
can you please add more code, i am not able to understand whats wrong here — Ashish Kamble, Nov 10 '21 at 13:45
@szaman using class components is one the requirements of the project. I provided the error above — Davrick, Nov 10 '21 at 13:45

score 0 · Answer 1 · answered Nov 10 '21 at 14:03

Check out the docs for componentDidUpdate. You named the first argument prevState, but the first argument is previous props. You are trying to compare an inexistent previous prop to the current one and then setting the state which doesn't change the previous props. This results in an infinite loop.

Try this:

componentDidUpdate(prevProps, prevState) {
  const { type } = this.props.match.params;
  if (type !== prevState.type) {
    this.setState({ type });
  }
}

Consider switching to typescript, these kind of errors would be immediately highlighted in your editor.

Note that you probably don't need to derive state from props. You could implement shouldComponentUpdate instead.

Still it is not rendering, it is working after a refresh though. I am changing route using ```this.handleTabClick = (input) => history.push(`/home/items/${input}`);``` is that okay ? — Davrick, Nov 10 '21 at 14:11

Render react class component on route params change

1 Answers1