JSX에 함수 임베딩 

JavaScript는 가비지 수집 언어로 잘 알려져 있습니다. 가비지 수집기는 더 이상 응용 프로그램의 일부에서 사용하지 않는 메모리를 회수하려고 시도하여 메모리를 관리합니다. 렌더링에서 함수를 정의하면 포함하는 구성 요소를 다시 렌더링 할 때마다 함수의 새 인스턴스가 생성됩니다. 이 관행이 응용 프로그램 전체에서 발생하면 결국 메모리 누수 형태의 가비지 수집기에 문제가 됩니다. 응용 프로그램의 일부에서 사용하는 메모리가 더 이상 사용되지 않더라도 해제되지 않는 상황입니다.

class GroceryList extends React.Component {
    state = {
        groceries: [],
        selectedGroceryId: null
    }

    render(){
        const { groceries } = this.state;
        return (
           groceries.map((grocery)=>{
               return <Grocery onClick={(e)=>{
                    this.setState({selectedGroceryId:grocery.groceryId})
               }} grocery={grocery} key={grocery.id}/>
           }) 
        )
    }
}

올바른 것은 렌더링 직전에 새로운 함수 onGroceryClick를 정의하는 것입니다.

class GroceryList extends React.Component {
    state = {
        groceries: [],
        selectedGroceryId: null
    }

    onGroceryClick = (groceryId)=>{
        this.setState({selectedGroceryId:groceryId})
    }

    render(){
        const { groceries } = this.state;
        return (
           groceries.map((grocery)=>{
               return <Grocery onClick={this.onGroceryClick} 
                grocery={grocery} key={grocery.id}/>
           }) 
        )
    }
}