React의 Render 메소드에서 Bind 및 Inline Arrow 기능을 사용하지 말아야 하는 이유는 무엇입니까?

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  // Binding in constructor
  handleClick() {
    console.log("Constructor binding");
  }

  // Property initializer syntax
  deleteTodo = () => {
    console.log("Property initializer binding");
  };

  handleClickWithArgs = (el) => {
    console.log(`Delete todo: ${el}`);
  };

  render() {
    // Arrow function in constructor (no extra parameters)
    return (
      <div onClick={this.handleClick}>
        {" "}
        Click Me Constructor Binding{" "}
      </div>
    );
  }
}

function App() {
  const todos = ["a", "b", "c"];

  // Using arrow functions in the outer scope
  const handleDeleteTodo = (el) => {
    console.log(`Delete todo: ${el}`);
  };

  return (
    <div>
      {todos.map((el) => (
        <MyComponent key={el} onClick={handleDeleteTodo} />
      ))}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));