Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Stage is killing the Context

See original GitHub issue

I’m developing a project using provider pattern. So I’m passing informations between my components using context.

Then, at Map component I have this:

const Map = () => {
  const { ... } = useContext(VisionContext).vision // I can use VisionContext here

  return (
    <Fragment>
      <Stage>
        <TilemapLayer />
    ...
  )
}

And for some unknown reason, I have a problem at TilemapLayer because the context didn’t arrive at this component:

const TilemapLayer = ({ setSelectedPointInfos }) => {
  const { ... } = useContext(VisionContext).vision // Error! "useContext(VisionContext)" returns "undefined" here!

Debugging it I replaced the Stage to div at return of Map:

const Map = () => {
  ...

  return (
    <Fragment>
      <div>
        <TilemapLayer />
    ...
  )
}

And with this code, I can use useContext(VisionContext) at TilemapLayer. I tried replacing div for others components as well, and it’s worked.

Because of it, I think that Stage is killing the Context - what is a bug.

Issue Analytics

State:
Created 4 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

4reactions

lavrtoncommented, Mar 31, 2019

react-konva is a custom renderer. At the current moment, it can’t have access to contexts of the parent tree. I can’t find a way to may it work automatically.

So react-konva reset all the stack. The good news is that you can “bridge” contexts manually. The idea is simple. Consume the context BEFORE Stage component. Then provide it again (with the same value) INSIDE Stage:

const Canvas = () => {
  return (
    <ThemeContext.Consumer>
      {value => (
        <Stage width={window.innerWidth} height={window.innerHeight}>
          <ThemeContext.Provider value={value}>
            <Layer>
              <ThemedRect />
            </Layer>
          </ThemeContext.Provider>
        </Stage>
      )}
    </ThemeContext.Consumer>
  );
};

Demo: https://codesandbox.io/s/ykqw8r4r21

0reactions

BryceDalbeycommented, Sep 27, 2022

I’ve just tried it out with react-konva@18.2.2 and had no problems. I also bridged into the <Html> wrapper with no issues, though I haven’t tested that as much.

Not sure this is the right place for this but just in case others are doing the same as me: I originally bridged into the stage to use a customization menu from outside the stage but once I had enough elements inside the stage (~15 1000x500px partly transparent images with RGB filters) the latency became noticeable (since every component in the stage would run on each state update). So I moved the menu inside the stage and separated it out so I could wrap each part and the layers it interacts in a separate context (hence having to bridge into html wrappers). This way makes organizing the menu a pain since each part is inside a separate html wrapper but the performance is obviously much better.

Top Results From Across the Web

correct way to kill running spark taskset, without killing Spark ...

Every so often I want to abort some long-running computation in spark, but I would like to leave the spark context & cached...

UNODC, Global Study on Homicide 2019

By bringing together the available data, the United. Nations Office on Drugs and Crime seeks to shed light on different phenomena, from lethal...

Configuration - Spark 3.3.1 Documentation - Apache Spark

Spark properties control most application parameters and can be set by using a SparkConf object, or through Java system properties. Environment variables can...

How to kill a running Spark application? - Stack Overflow

copy paste the application Id from the spark scheduler, for instance application_1428487296152_25597; connect to the server that have launch ...

How the Court works | International Criminal Court

The crimes The Court's founding treaty, called the Rome Statute, grants the ICC jurisdiction over four main crimes.