Why React callback bind to null works?

Question

A working WebpackBin can be found at link below,

https://www.webpackbin.com/bins/-Kibrw5tNNrsQpENUv_M

I have two components. Parent component pass a function to its child component via prop and child component's event handler invoke the passed in function via func.bind(null, num) to provide extra pre-set argument.

Why dummyFunc.bind(null, 666) works, should not bind make the newly created function this context become null? Hence, every this.setState should become undefined.

---

Parent Component Code,

import React from 'react'
import Component from './Component'

export default class Hello extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      foo: 2
    }

    this.foo = this.foo.bind(this)
  }

  foo(newValue) {
    this.setState({
      foo: newValue + this.state.foo
    })
    console.log(this.state.foo)
  }

  render() {
    return (
      <div>
        <h1>App</h1>
        <Component dummyFunc={this.foo} />
      </div>
    )
  }
}

Child Component Code,

import React from 'react'

const Component = ({dummyFunc}) => {
  return (
    <div>
      <button onClick={dummyFunc.bind(null, 666)}>BUTTON</button>
    </div>
  )
}

export default Component

Answer 1

Why alert.bind(null, 666) works, should not bind make the newly created function this context become null?

It only changes the context of the function you're binding to: alert (and only for the newly created bound function). So inside the alert function the context would be changed, which is almost fine - since internally alert would not use the default context, but that's not constrained.

The purpose of that code is to partially apply the argument for the alert function - that is a number 666.

From that perspective it would be more semantically correct to use anonymous functions:

<button onClick={() => alert(666)}>BUTTON</button>

In your bin you:

this.foo = this.foo.bind(this)

So you have bound a context explicitly. After you do that every other .bind() does not change the context anymore (it is as per the standard).