Memory Leaks with inline vs. bound functions


(Dain Hall) #1

I had a discussion with a coworker and he said inline functions in render() cause memory leaks. Fair enough. So I suggested we curry a bound function. He said that would still recreate the memory leak. Is that true? If so, how do we use currying to clean things up without introducing memory leaks?? Example code below.

export default class ParentComponent extends Component {
    constructor(props) {
        super(props);
        
        this.state = {
            memLeak: false,
        };
        
        this.curryExample = this.curryExample.bind(this);
    }
    
    curryExample(bool) {
        return ()=> {
            this.setState({memLeak: bool})
        };
    }
    
    render() {
        const {memLeak} = this.state;
        
        return (
            <div>
                {/* inline func bound to Parent scope leads to memory leaks */}
                <ChildComponent onClick={()=> this.setState({memLeak: !memLeak})}/> 
                {/* but does a bound function to Parent scope do the same?? */}
                <ChildComponent onClick={this.curryExample(!memLeak)}/>
            </div>
        );
    }
}

(Sophie Alpert) #2

Neither of your examples will cause a memory leak unless ChildComponent stores a separate reference to the functions outside of React’s render cycle.