I haven't had to write a renderProps pattern since functional components/hooks became the thing to do - until now. Upon googling if its still the right approach, i've read a few articles on renderProps being old news and an antipattern. Alternatives provided include hooks or passing in a JSX node.

However, I have a requirement that can't be used by these two. I need to:

• Use a prop passed in from the child component.
• Use a prop within the parent component that is not used by the child.

It looks a bit like this:

const parent = (parentProp) => {
   const actions = useCallback((childProps) => {
     return <Button p1={childProps} p2={parentProps} />
   }, [parentProp])

   return <Child renderActions={actions} />
}

const child = (renderActions) => {
  const [childProp] = useState(1)

  const actionRenderer = useCallback(() => {
    return renderActions(childProp)
  }, [childProp, renderActions)
  
  return (
    <div>{actionRenderer}</div>
  )
}

I am concerned about performance and unnecessary re-renders, so the usecallbacks should stop this.

Is there a more 'modern' way of achieving this functionality or is renderProps still viable?