higher-order-components | useful React higher-order components | Frontend Framework library

I refer to this part of the official React tutorial (Convention: Maximizing Composability):

In this link https://reactjs.org/docs/higher-order-components.html where explanation is of higher order component.The code is below has class extends React.component. What is this class keyword here?

I have a sample placeholder component that consumes two required props:

The React docs have the following piece of code to extract the name of a component in an HOC (function getDisplayName). See the getDisplayName implementation below.

I'm new to TypeScript with React and I have (already) two HOCs in React and I would like to compose them because it is likely that there will be more.

I'm trying to create a reusable component, which alters it's behaviour - essentially rendering to either SVG or Canvas. I'm currently trying to do this by wrapping it up in a HoC (however I'm trying to use React hooks) so this is all falling a bit flat on it's face.

Edit with extra info

With the current approach (HoC returning a function) I get the following error:

Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

If I remove the function call within the HoC's:

React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object

I've seen an example of converting HoC's to React hooks, but I'm struggling to work out how I might convert this - if it's even possible and wondering if anyone can give me a pointer? I might have tried to architect this the wrong way, as it feels like quite a complex use case.

So I've these 2 HoC's at the moment which I feel like I need to refactor somehow to use hooks called withSVG and withCanvas. They setup different DOM to be represented and importantly one has a function called renderLoop which needs to be called from the Scatter component below.

Slightly quirky, is because the Scatter is just business logic now (leveraging dependencies in the useEffect), it doesn't actually need to return any DOM, because it's just manipulating the DOM of the parent HoC. I'm expecting many more components like Scatter in the future however so don't want to move this logic into the HoCs (if they're even the right way of doing this).

Following this react-firestore-tutorial and the GitHub code. I wonder if the following is correct way to use the onAuthStateChanged or if I have understod this incorrect I'm just confused if this is the right way.

CodeSandBox fully connect with a test-account with apikey to Firebase!! so you can try it what I mean and I can learn this.

(NOTE: Firebase is blocking Codesandbox url even it's in Authorised domains, sorry about that but you can still see the code)

t {code: "auth/too-many-requests", message: "We have blocked all requests from this device due to unusual activity. Try again later.", a: null}a:

Note this is a Reactjs-Vanilla fully fledge advanced website using only;
React 16.6
React Router 5
Firebase 7

Here in the code the Firebase.js have this onAuthStateChanged and its called from two different components and also multiple times and what I understand one should only set it up once and then listen for it's callback. Calling it multiple times will that not create many listeners?

Can someone have a look at this code is this normal in Reactjs to handle onAuthStateChanged? (src\components\Firebase\firebase.js)

I find that I am having to reimplement a lot of the same functionality. For example, with the next 3 components I am implementing the same code for style, className and id. I know that I can have {...props} as the argument instead hear, and then pass {...props} to the container inside the return function, but I am not able to do this if I want these components to each have their own classNames and styles that are always assigned to each instance of these classes. I looked into higher-order-components a bit, but couldn't wrap my head around how I would use them in this case

I've implemented a HOC withProvider with class based component :