Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cache sharedEvents prop to prevent re-renders #1592

Merged
merged 1 commit into from
May 29, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
cache shared events object to prevent re-renders
  • Loading branch information
NgoKnows committed May 28, 2020
commit 6ccab352bb4fc13c328c45096cc8447bed079fb8
30 changes: 29 additions & 1 deletion packages/victory-shared-events/src/victory-shared-events.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ export default class VictorySharedEvents extends React.Component {
this.getScopedEvents = Events.getScopedEvents.bind(this);
this.getEventState = Events.getEventState.bind(this);
this.baseProps = this.getBaseProps(props);
this.sharedEventsCache = {};
}

shouldComponentUpdate(nextProps) {
Expand Down Expand Up @@ -107,6 +108,20 @@ export default class VictorySharedEvents extends React.Component {
: undefined;
}

cacheSharedEvents(name, sharedEvents, cacheValues) {
this.sharedEventsCache[name] = [sharedEvents, cacheValues];
}

getCachedSharedEvents(name, cacheValues) {
const [sharedEvents, prevCacheValues] = this.sharedEventsCache[name] || [];

if (sharedEvents && isEqual(cacheValues, prevCacheValues)) {
return sharedEvents;
}

return undefined;
}

getBaseProps(props) {
const { container } = props;
const children = React.Children.toArray(this.props.children);
Expand All @@ -131,6 +146,7 @@ export default class VictorySharedEvents extends React.Component {

getNewChildren(props, baseProps) {
const { events, eventKey } = props;

const alterChildren = (children, childNames) => {
return children.reduce((memo, child, index) => {
if (child.props.children) {
Expand All @@ -150,13 +166,24 @@ export default class VictorySharedEvents extends React.Component {
? event.childName.indexOf(name) > -1
: event.childName === name || event.childName === "all";
});
const sharedEvents = {

const sharedEventsCacheValues = [
name,
baseProps,
childEvents,
JSON.stringify(this.state[name])
];

const sharedEvents = this.getCachedSharedEvents(name, sharedEventsCacheValues) || {
events: childEvents,
// partially apply child name and baseProps,
getEvents: (evts, target) => this.getScopedEvents(evts, target, name, baseProps),
// partially apply child name
getEventState: (key, target) => this.getEventState(key, target, name)
};

this.cacheSharedEvents(name, sharedEvents, sharedEventsCacheValues);

return memo.concat(
React.cloneElement(
child,
Expand All @@ -176,6 +203,7 @@ export default class VictorySharedEvents extends React.Component {
getContainer(props, baseProps, events) {
const children = this.getNewChildren(props, baseProps);
const parents = Array.isArray(events) && events.filter((event) => event.target === "parent");

const sharedEvents =
parents.length > 0
? {
Expand Down