React, how to know when a pure function component has been rendered?

Question

I'm writing a library that logs when components get re-rendered, so I need to detect that.

I can do it for components that extends React.Component by monkey-patching React.Component.prototype.componentDidUpdate, but how can I detect when a pure function component gets rendered? Is that even possible to do?

Answer 1

Since function components don't use inheritance and lifecycle hooks, it isn't possible to patch them without modifying component source code.

It's possible to use API that is used by React dev tools to access React renderer, a hook is assigned to __REACT_DEVTOOLS_GLOBAL_HOOK__, then it is caught up by React renderer. A good example is react-render-hook. It doesn't provide needed functionality itself but can be modified to requirements, specifically this line.