Spent some time to read the codebase for React Side Effects with a bit notes.

what and hows

created by dan abramov, handles side effects reduced from props, looks at all instances for the component altogether

most notable usage is react helmet, followed by a couple other libraries relying the same concept (must look at all instances together to decide a winner)

how to use

withSideEffect(
  reducePropsToState,
  handleStateChangeOnClient,
  mapStateOnServer // optional
)(MyComponent);

what happens under the hood

• componentWillMount, componentDidUpdate -> call emitChange()
• componentWillUnmount -> remove the instance and call emitChange()
• emitChange() -> calls reducePropsToState for every instance's props

key concept

allows you to work on all instances of a component as a whole. i.e., "winning styles" between nested instances of one component

whys

• why must reduce props to state?
• is this still needed after hooks?

used by

• react focus lock
• react document meta
• react helmet
• gluestick also a boilerplate