rowRenderer invalid hooks error

[aselcuk]

I used rowRenderer for my custom row component and ı need to use useEffect hooks inside this component but ı got Invalid hook call error.

...
      <AutoResizer>
        {({ width, height }) => (
          <Table
            data={events}
            width={width}
            height={height}
            onEndReached={handleEndReached}
            headerRenderer={<BulletinHeader eventsTotalCount={eventsTotalCount} />}
            rowRenderer={EventRow}
            rowHeight={84}
          />
        )}
      </AutoResizer>
...

if ı use the hooks inside EventRow component ı got react.development.js:1476 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. error. EventRow is a functional component.

[cph0]

You can pass an inline function to the rowRenderer prop like this:

rowRenderer={props => <EventRow {...props} />}

You shouldn't get the invalid hooks error in this case.

[aselcuk]

@cph0 thanks for solution ı applied it but ı think still this is an issue.

[nihgwu]

@aselcuk Hey, that's because if it's a function, it will be invoked directly instead of React.createElement for performance reason, and that is made before React Hooks are created, in the next major version, it will always be treated as a component