Scrolling triggers render on all child components of StickyContainer

Confirmed by modifying timeline example like so:

    const Lorem = props => {
        console.log("LOREM RENDERED", props);
        return (
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        );
    }

      let timeline = [2000, 2010].map((decade) => {
        return (
          <StickyContainer style={{zIndex: 4}}>
            <Sticky style={{zIndex: 3}}>
              <h2>{decade}s</h2>
            </Sticky>
            { _.range(0,10).map((i) => {
              return (
                <StickyContainer style={{zIndex: 2}}>
                  <Sticky>
                    <h3>{decade + i}</h3>
                  </Sticky>
                  <Lorem />
                  <Lorem />
                </StickyContainer>
              );
            })  }
          </StickyContainer>
        );
      })

This absolute wrecks performance whenever your children are at all complex.

[dbarbalato]

5.0.3 is now available on npm

[dbarbalato]

Just did a big performance upgrade (special thanks to @phestermcs for the main idea) that should significantly cut the number of redraws required.

Changes are available on npm as 5.0.1 – any feedback would be great, but I’d be equally happy with a closed issue 😃