Git Product home page Git Product logo

Comments (9)

mmomtchev avatar mmomtchev commented on May 25, 2024

I am not very sure that this is a good idea, propsDiff is mostly a debugging aid.

This is an artificial edge case. Normally, you should have used useCallback on the map to prevent excessive refreshing. Maybe there are some optimizations possible, but it would be very bug prone and I don't think it will help a lot for any real-world use case. Also, you are not supposed to nest layers.

from rlayers.

mmomtchev avatar mmomtchev commented on May 25, 2024

Just imagine, in your case, what would happen if you had another nested level inside - for example with a feature - and its property did change depending on the map property. You would have blocked the propagation down the chain.

from rlayers.

boborua avatar boborua commented on May 25, 2024

Thanks for your time.

Considering this case

const App = () => {
  cont [count, setCount] = React.useState(0);
  return <RMap onChange={() => setCount(s => s + 1)}>
    <RLayerTile>
      <RLayerTileWMS url="https://example.com/wms" />
    </RLayerTile />
  </RMap>
}

After going throught some source code, i know that
RLayerTileWMS extends RLayerBase which eventually has base class PureComponent. When state in wrapper compoent(App) changes, RlayerTileWMS should not be renderred because all i'ts props (only url in this case) are not changing. But the componentDidUpdate did called. It makes me confusing... (Maybe the context is changing?)

from rlayers.

mmomtchev avatar mmomtchev commented on May 25, 2024

The context probably changes, but you are not supposed to be nesting layers at all. I don't want to optimize this case, as it will be very error-prone and it is an artificial edge case that forces an update of RMap component. This should have been a constant function obtained by useCallback - otherwise it will surely kill performance.

from rlayers.

boborua avatar boborua commented on May 25, 2024

Sorry for my copy&past mistake, in my minimum case, RLayerTileWMS is not nested.

const App = () => {
  cont [count, setCount] = React.useState(0);
  return <RMap onChange={() => setCount(s => s + 1)}>
      <RLayerTileWMS url="https://example.com/wms" />
  </RMap>
}

from rlayers.

mmomtchev avatar mmomtchev commented on May 25, 2024

Ok, now it is correct, but it is still an artificial case.

from rlayers.

mmomtchev avatar mmomtchev commented on May 25, 2024

If you submit a PR that does not touch the base classes, but only RLayerTileWMS, I will consider it. Do not use propsDiff, it is a debugging aid.

from rlayers.

boborua avatar boborua commented on May 25, 2024

I found this is a common render issue that in RLayerBase there is RContext declared, further in RMap which set the value of Context.Provider.

In this way, React.PureComponent was not acting as expected...

let me make a stackblitz example then...

from rlayers.

mmomtchev avatar mmomtchev commented on May 25, 2024

Yes, rerendering a layer would replace the context object. If your problem is only with the RLayerTileWMS, I prefer that you modify only this component. Currently, it will recreate the source, because the settings cannot be changed. This can probably be memoized.

Directly memoizing the context object could save rerenders, but it is a dangerous change that would have to be very thoroughly tested.

from rlayers.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.