This is the error I got:

No `render` method found on the returned component instance: you may have forgotten to define `render`.
    in Component (at withScreenDimensionHOC.js:11)

The error caused when I wrapped the HOC to class component

export default connect(mapStateToProps, mapDispatchToProps)(
  withScreenDimensionHOC(ClassComponent)
);

This is how I created custom hook and HOC

I created custom hook:

import { useEffect, useState } from 'react';

export const useScreenDimension = () => {
  const [width, setWidth] = useState(window.innerWidth);
  const [height, setHeight] = useState(window.innerHeight);

  useEffect(() => {
    const handleDimension = event => {
      setWidth(event.target.innerWidth);
      setHeight(event.target.innerHeight);
    };
    window.addEventListener('resize', handleDimension);
    return () => {
      window.removeEventListener('resize', handleDimension);
    };
  }, []);
  return { width, height };
};

HOC:

import React, { Component } from 'react';

import { useScreenDimension } from '../hooks/useScreenDimension';

const withScreenDimensionHOC = () => {
  return props => {
    const { width, height } = useScreenDimension();
    return <Component width={width} height={height} {...props} />;
  };
};

withScreenDimensionHOC.displayName = 'withScreenDimensionHOC';

export default withScreenDimensionHOC;

Then wrapped the HOC to class component

export default connect(mapStateToProps, mapDispatchToProps)(
  withScreenDimensionHOC(ClassComponent)
);

CodePudding user response：

You're trying to render <Component>, React's base component class.

It has no render method, like the error says. You pass a component into withScreenDimensionHOC but ignore it. Don't ignore it ;)

You probably meant something like:

const withScreenDimensionHOC = WrappedComponent => (
  props => {
    const { width, height } = useScreenDimension()
    return <WrappedComponent width={width} height={height} {...props} />
  }
)