1

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?

plusheen
  • 1,128
  • 1
  • 8
  • 23
  • 1
    `actionRenderer` seems pointless. Just directly `return
    {renderActions(childProp)}
    ;`. `useCallback` is very much unnecessary, unless the (child) component where you pass in the callback does explicitly memoise things with the callback as a dependency.     – Bergi Feb 24 '22 at 19:24
  • Yeah I just ran the code and saw it makes no difference as I have to call the function anyway. There's nothing fancy going on in the actual implementation, its just an action row for a form. Thanks for the info. – plusheen Feb 24 '22 at 19:27
  • Btw, could you maybe share your actual code? Because the example you gave actually *could* be solved both using a hook and using `children`. – Bergi Feb 24 '22 at 19:29

1 Answers1

1

I don't see a problem with your code honestly (apart from several typos).

Render Props pattern is still viable as are hooks and HOC.

Read this if you want to learn more: https://stackoverflow.com/a/58856111/3930247

Personally, I almost never use render props because it makes the code less readable but that's just my opinion. There are many examples where render props are used in modern React.

technophyle
  • 7,972
  • 6
  • 29
  • 50
  • I wanted to avoid it as i've seen the callback hells that can be made. But I don't know how to replicate this functionality with any other pattern unless i do some weird stuff like create a context and a hook. But this is just a "heres a form state, how do you want the action row/buttons to look" – plusheen Feb 24 '22 at 19:28
  • For your specific code, I don't think you need another pattern. You can just send the `parentProp` to child and render a button there. – technophyle Feb 24 '22 at 19:29
  • Would adding a property to a component that is only relevant to a specific parent be a good idea? Or are you referring to passing in a `...rest` to any children passed in? – plusheen Feb 24 '22 at 19:49
  • I mean you don't need a render prop or any other pattern for your current example. You can just send parent's props to child and inside child, render the button. – technophyle Feb 24 '22 at 20:47