How to use the React Context API?

Question

I have a React App (setup with CRA) with a global element (custom cursor, that is a rounded div following the mouse) whose style I want to update/change when hovering various other components that are nested differently and more or less deeply (in the structure provided below I am only listing one example component). From what I understand this is a good use case for Context API.

The structure of my App looks like this (simplified):

<Cursor />
<Layout>
  <Content>
    <Item />
  </Content>
</Layout>

So when hovering <Item /> (amongst other components) I want to update the style of the <Cursor /> component.

Therefore I tried to access a function I set up inside my <Cursor /> component in my <Item /> component. Unfortunately when hovering it does not update my state and as consequence the style of my <Cursor /> does not change.

My Cursor component looks like this (simplified):

import React, { Component } from "react"
export const CursorContext = React.createContext(false)

class Cursor extends Component {

  constructor(props) {
    super(props)
    this.state = {
      positionX: 0,
      positionY: 0,
      scrollOffsetY: 0,
      display: "none",
      isHoveringProjectTeaserImage: false,
    }
    this.handleMousePosition = this.handleMousePosition.bind(this)
    this.handleMouseOverProjectTeaser = this.handleMouseOverProjectTeaser.bind(this)
    this.handleMouseLeaveProjectTeaser = this.handleMouseLeaveProjectTeaser.bind(this)
  }

  handleMousePosition = (mouse) => {
    this.setState({
      positionX: mouse.pageX,
      positionY: mouse.pageY,
      display: "block",
      scrollOffsetY: window.pageYOffset
    })
  }

  handleMouseOverProjectTeaser = () => {
    this.setState({
      isHoveringProjectTeaserImage: true
    })
  }

  handleMouseLeaveProjectTeaser = () => {
    this.setState({
      isHoveringProjectTeaserImage: false
    })
  }

  componentDidMount() {
    document.body.addEventListener("mousemove", this.handleMousePosition)
  }

  componentWillUnmount() {
    document.body.removeEventListener("mousemove", this.handleMousePosition)
  }

  render() {

    const {
      positionX,
      positionY,
      display,
      scrollOffsetY,
      isHoveringProjectTeaserImage
    } = this.state

    return(

    <CursorContext.Provider value={this.state}>
      <div>
        <StyledCursor
          style={ isHoveringProjectTeaserImage
                  ? {backgroundColor: "red", display: `${display}`, top: `${positionY - scrollOffsetY}px`, left: `${positionX}px`}
                  : {backgroundColor: "yellow", display: `${display}`, top: `${positionY - scrollOffsetY}px`, left: `${positionX}px`}}
        />
      </div>
    </CursorContext.Provider>
    )
  }

}

export default Cursor

And my Item Component that can be hovered looks like this (simplified):

import React, { Component } from "react"
import { CursorContext } from '../Cursor/Index';

class Item extends Component {
  constructor(props) {
    // not showing stuff in here that's not relevant
  }

  static contextType = CursorContext

  render() {
    return(
      <CursorContext.Consumer>
        {(value) =>
          <StyledItem
            onMouseOver={value.handleMouseOverProjectTeaser}
            onMouseLeave={value.handleMouseLeaveProjectTeaser}
          >
          </StyledItem>
        }
      </CursorContext.Consumer>
    )
  }

}

export default Item

Do I even need to use static contextType = CursorContext?

When not passing a default value (I thought they are optional anyway) I am getting an TypeError: Cannot read property 'handleMouseOverProjectTeaser' of undefined, as soon as I pass a long a false as default value my App renders but does not update my <Cursor /> state.

Am I even using Context API correctly?

Answer 1

React.createContext default value?

As you correctly stated, the value passed to React.createContext() does not matter in this case.

When not passing a default value (I thought they are optional anyway) I am getting an TypeError: Cannot read property 'handleMouseOverProjectTeaser' of undefined, as soon as I pass a long a false as default value my App renders but does not update my state.

This brings out the fact that your default value is always used: try running undefined.blahblah vs. false.blahblah: the former throws a TypeError while the second silently returns undefined.

So we know the value you set in <Provider value={...}> never reaches the consumer, but why?

The Context is only available to its descendants

The <C.Consumer> is not rendered as a descendant of the <C.Provider>, so it can't get access to it. In other words, the provider should "enclose" the consumers. From the docs:

Context is designed to share data that can be considered “global” for a tree of React components [...]

The root of that tree is your <C.Provider>, and in your case, the consumer is not part of that tree.

Something like that could work:

<CursorContext>
  <StyledCursor />
  <Layout>
    <Content>
      <Item />
    </Content>
  </Layout>
</CursorContext>

Misc.

Do I even need to use static contextType = CursorContext?

Not really, if you're using <CursorContext.Consumer>. From the docs:

Context.Consumer: A React component that subscribes to context changes.

But in your case, since you don't need to listen to context changes (from your example code anyways), just keep the static contextType:

  static contextType = CursorContext

  render() {
    return(
      <StyledItem
        onMouseOver={this.context.handleMouseOverProjectTeaser}
        onMouseLeave={this.context.handleMouseLeaveProjectTeaser}
      >
      </StyledItem>
    )
  }

The point is you should use one or the other, you don't need both.

---

Last thing, you're passing this.state in the provider, and using this.context.handleMouseOverProjectTeaser in the child component... but there is no such function in <Cursor>'s state. Maybe you intended to pass <Cursor> itself, or better, just the handlers?