React组件的componentDidMount中耗时的函数调用

Question

In the componentDidMount function of my React component, I am passing a string (which is received through props) to a function that performs some processing on that string and returns me another string as a result. Then I am updating the state using that resulting string.

import React, { Component } from "react";
import {fun} from "../some/module";

class Comp extends Component {
    state = {
        data: "default value"
    };

    componentDidMount() {
        var { str } = this.props;
        var data = fun(str);
        this.setState({ data });
    }

    render() {
        return (
            <p>{this.state.data}</p>
        );
    }
}

export default Comp;

The function fun(text) runs up to 3 - 4 second. It doesn't fetch any data from any remote server, it only generates a new string based on the given string. I have a React Router Link of this component on another component. I can view this component by clicking on that link. The problem is when I click on that link, it waits until the componentDidMount function finishes execution and then it renders this component. Because of that time-consuming function call in the componentDidMount function, this delay lasts for 3 - 4 seconds.

I want to render this component immediately after clicking that link using the default state. And after fun(text) function finishes its execution, I want to render again or update this component using the string returned by fun(text) .

How can I achieve this behaviour in this component? When and where I should call the function fun(text) ?

Answer 1

You can use static getDerivedStateFromProps() instead of componentDidMount .

static getDerivedStateFromProps(nextProps,prevState) {
      if(nextProps.str) {
            const resultData = fun(str);
            return {
                 data: resultData
            } 
     }
    return null

}

I hope It'll be helpful. For More Info about getDerivedStateFromProps() Here is the Link