Skip to content

Replace class inheritance with component composition

No due date 50% complete

When one component extends another, it is making two assumptions.

  1. The base component is a Javascript class, and not a function
  2. The base component has specific methods that can be overridden

This can make it really difficult to refactor these base classes, as we might be unknowingly breaking another class that extends it, both inside Victory and in victo…

When one component extends another, it is making two assumptions.

  1. The base component is a Javascript class, and not a function
  2. The base component has specific methods that can be overridden

This can make it really difficult to refactor these base classes, as we might be unknowingly breaking another class that extends it, both inside Victory and in victory-native. This is why there are currently a lot of comments like "this is overridden in victory-native" to avoid this problem. This also happens in several places inside Victory, such as in the container components that extend VictoryContainer and override functionality with mixins.

Some of these problems might be better solved by composition. For example, rather than extending a component, we could render the base component and pass in different props. This way, we would be free to refactor the internal workings of a component, and a breaking change would only occur if the external-facing props change.

const ReactNativeVictoryLine = (props) => {
	return <VictoryLine {...props} shouldAnimate={false} />
}

For more information: https://reactjs.org/docs/composition-vs-inheritance.html