Context value undefined in server

Hello,

I’m trying to provide a value to view width on the initial server render in my SSR app. However I noticed that the context value is undefined in the server, then it gets updated to the value I provided once it gets rendered by the browser. This causes some of my components to not be rendered at first, but once the page rerenders in the browser they work just fine.

I’m using after.js for SSR and tried wrapping my outermost component with the Context provider when I noticed the issue. Later I did the following inside a component, just for investigation:

    <ResponsiveContext.Provider value={{ width: 100 }}>
      <ResponsiveContext.Consumer>
        {(values) => {
          console.warn({ values });
          return null;
        }}
      </ResponsiveContext.Consumer>
    </ResponsiveContext.Provider>

And the result was the same: server prints { values: undefined } and the browser prints {values: {…}}

react version is 16.8.6 react-responsive version is 7.0.0

Is this some unexpected behavior from this library or am I doing something wrong?

[vspedr]

@Tomekmularczyk thanks for the clarification, indeed it’s not a bug in react-responsive so I’ll close this issue. I’m still not sure why it wouldn’t work like that, but I found a workaround by wrapping each one of my route components with the ResponsiveContext provider.

For reference: https://github.com/jaredpalmer/after.js/issues/221

[Tomekmularczyk]

@vspedr so this is general setup problem. Try this:

1. Create src/Context.js

import React from "react";

export const TestContext = React.createContext();

1. Do this in src/client.js:

...
import { TestContext } from "./Context";

ensureReady(routes).then(data =>
  hydrate(
      <TestContext.Provider value="test">
        <BrowserRouter>
          <After data={data} routes={routes} />
        </BrowserRouter>
      </TestContext.Provider>,
    document.getElementById("root")
  )
);

1. and in src/Home.js:

import { TestContext } from "./Context";

class Home extends Component {
  ...

  render() {
    return (
      <div className="Home">
        <h1>Demo</h1>
        {/* A plain react context */}
        <TestContext.Consumer>
          {values => {
            console.warn({ values });
            return (
              <div>
                ...
              </div>
            );
          }}
        </TestContext.Consumer>

You will see that even with regular React.Context server will print:

{ values: undefined }

cc @contra