Work

Sathananthan Sabesan sabesansathananthan

Work

Software Engineer @syscolabs, Postgraduate of Computer Science and Engineering at University of Moratuwa.

sabesansathananthan / MouseTracker.html

Last active June 19, 2021 21:44

How React Components Are Reused

sabesansathananthan / LogProps.js

Created June 19, 2021 20:55

How React Components Are Reused

	function logProps(Component) {
	class LogProps extends React.Component {
	componentDidUpdate(prevProps) {
	console.log('old props:', prevProps);
	console.log('new props:', this.props);
	}

	render() {
	const {forwardedRef, ...rest} = this.props;

sabesansathananthan / MyComponent.js

Last active June 19, 2021 20:43

How React Components Are Reused

	// Use this method instead...
	MyComponent.someFunction = someFunction;
	export default MyComponent;

	// ...Export the method separately...
	export { someFunction };

	// .. and in the components to be used, import them
	import MyComponent, { someFunction } from "./MyComponent.js";

sabesansathananthan / enhance.js

Created June 19, 2021 20:40

How React Components Are Reused

	import hoistNonReactStatic from "hoist-non-react-statics";

	function enhance(WrappedComponent) {
	class Enhance extends React.Component {/.../}
	hoistNonReactStatic(Enhance, WrappedComponent);
	return Enhance;
	}

sabesansathananthan / Enhance.js

Created June 19, 2021 20:36

How React Components Are Reused

	function enhance(WrappedComponent) {
	class Enhance extends React.Component {/.../}
	// Must know exactly which methods should be copied :(
	Enhance.staticMethod = WrappedComponent.staticMethod;
	return Enhance;
	}

sabesansathananthan / WrappedComponent.js

Created June 19, 2021 20:34

How React Components Are Reused

	// Define static function
	WrappedComponent.staticMethod = function() {/.../}
	// Use HOC now
	const EnhancedComponent = enhance(WrappedComponent);

	// Enhanced component does not have staticMethod
	typeof EnhancedComponent.staticMethod === "undefined" // true

sabesansathananthan / EnhancedComponent.js

Created June 19, 2021 20:24

How React Components Are Reused

	render() {
	// Each call to the render function creates a new EnhancedComponent
	// EnhancedComponent1 !== EnhancedComponent2
	const EnhancedComponent = enhance(MyComponent);
	// This will cause the subtree to be unloaded and remounted every time it is rendered!
	return <EnhancedComponent />;
	}

sabesansathananthan / MyComponent.js

Last active June 19, 2021 20:25

How React Components Are Reused

	render() {
	// Each call to the render function creates a new EnhancedComponent
	// EnhancedComponent1 !== EnhancedComponent2
	const EnhancedComponent = enhance(MyComponent);
	// This will cause the subtree to be unloaded and remounted every time it is rendered!
	return <EnhancedComponent />;
	}

sabesansathananthan / EnhancedComponent.js

Created June 19, 2021 20:11

How React Components Are Reused

	const EnhancedComponent = withRouter(connect(commentSelector)(WrappedComponent))

	// You can write combined tool functions
	// compose(f, g, h) Equivalent to (...args) => f(g(h(...args)))
	const enhance = compose(
	// These are single-parameter HOCs
	withRouter,
	connect(commentSelector)
	)
	const EnhancedComponent = enhance(WrappedComponent)

sabesansathananthan / ReduxConnect.js

Created June 19, 2021 20:06

How React Components Are Reused

	// React Redux's `connect` Function
	const ConnectedComment = connect(commentSelector, commentActions)(CommentList);

	// connect is a function, and its return value is another function.
	const enhance = connect(commentListSelector, commentListActions);
	// The return value is HOC, which will return components that have been connected to the Redux store
	const ConnectedComment = enhance(CommentList);