Binding an event listener to a function in a functional component React Native

I'm a bit confused now I've read

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Specifically this from above:

"Arrow functions don't have their own bindings to this, arguments or super, and should not be used as methods."

Apparently doing

function Foo() {
  const handleClick = () => {
    //Code here
  };
  return <Button onClick={handleClick}>Click Me</Button>;
}

The code above is literally seen so much in react native docs too!

This doesn't bind to the component itself and I've had instances of codestuff run on other instances of this component! It's either that or this code is creating multiple instances of handle click in memory which causes problems on rerender.

How to properly bind an event listener to a function in ES6? There is so much false information out there! I assume I need to remove the arrow function from codestuff...can someone explain it to me simply why this code appears to work, but then sporadically I'll get the wrong codestuff on the wrong instance of that functional component?