save react component and load later

Question

I have react component in react native app and this will return Smth like this:

constructor(){
    ...
    this.Comp1 = <Component1 ..... >
    this.Comp2 = <Component2 ..... >
}
render(){
    let Show = null
    if(X) Show = this.Comp1
    else Show = this.Comp1
    return(
        {X}
        )
    }

and both of my Components have an API request inside it ,

so my problem is when condition is changed and this toggle between Components , each time the Components sent a request to to that API to get same result ,

I wanna know how to save constructed Component which they wont send request each time

Answer 1

One of the ways do that is to handle the hide and show inside each of the child component comp1 and comp2

So you will still render both comp1 and comp2 from the parent component but you will pass a prop to each one of them to tell them if they need to show or hide inner content, if show then render the correct component content, else just render empty <Text></Text>

This means both child components exist in parent, and they never get removed, but you control which one should show its own content by the parent component.

So your data is fetched only once.

Check Working example in react js: https://codesandbox.io/s/84p302ryp9
If you checked the console log you will find that fetching is done once for comp1 and comp2.

Also check the same example in react native below:

class Parent extends Component {
  constructor(props)
  {
    super(props);
    this.state={
      show1 : true //by default comp1 will show
    }
  }

  toggleChild= ()=>{
    this.setState({
      show1 : !this.state.show1
    });
  }

  render(){
    return (
      <View >
        <Button onPress={this.toggleChild} title="Toggle Child" />
        <Comp1 show={this.state.show1} />
        <Comp2 show={!this.state.show1} />
      </View>
    )
  }
}

Comp1:

class Comp1 extends Component
{
  constructor(props) {
    super(props);
    this.state={
      myData : ""

    }
  }

  componentWillMount(){
    console.log("fetching data comp1 once");
    this.setState({
      myData : "comp 1"
    })
  }


  render(){
    return (
      this.props.show ? <Text>Actual implementation of Comp1</Text> : <Text></Text>
    )
  }
}

Comp2:

class Comp2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      myData2: ""

    }
  }

  componentWillMount() {
    console.log("fetching data in comp2 once");
    this.setState({
      myData2: "comp 2"
    });
  }


  render() {
    return (
      this.props.show ? <Text>Actual implementation of Comp2</Text> : <Text></Text>
    )
  }
}