reactjs - Why won't parent props get updated in dynamically created child Components (that are generated once)

Question

Playing with performance and seeing if saving the state of dynamically generated components on componentDidMount() essentially creates performance improvement.

I see that {...this.props} only represents the props passed on the initial creation. Updates to the parent props does not trickle down on render() update.

This makes sense given React architecture but doesn't given JS referencing. Is it because this.props is merely an update of props, not an actual variable reference?

Musings: This would seem most performant method of dynamic components because they are generated only once. But it loses React's tracking ability I guess, why wouldn't React maintain understanding that these Views are grabbing {..this.props}.

// Inline Render
class MyDynamicViews extends React.Component {


    state = {
        views: []
    }

    componentDidMount() {

        let json = [{
            view: 1
        }, {
            view: 2
        }, {
            view: 3
        }];

        let views = json.map((view, i) => {
            return <View key={i} {...this.props}>{view.i}</View>
        });

        this.setState({views});

    }

    render() {
        return <View>{this.state.views}</View>

    }
}

Answer 1

views returns <View key={i} {...this.props}>{view.i}</View> and you're setting this element using setState. This is not correct way to do. You would need to do like below:

class MyDynamicViews extends React.Component {
    state = {
        views: []
    }
    componentDidMount() {
        // now, you want to update the state
        // I suppose you're going to update the state fetching the data
        // thus, placed your new state data same here
        let views = [{
            view: 1
        }, {
            view: 2
        }, {
            view: 3
        }];
        this.setState({views});
    }
    render() {
        const views = this.state.views
        return views && views.map((view, i) => (
          <View key={i} {...this.props}>{view}</View>
        ))
    }
}

Now, you'll get your component working fine and without any issue with props.