DEV Community

The amazing Render props pattern for React.js — lifecycle begone!

Chris Noring on June 10, 2019

Follow me on Twitter, happy to take your suggestions on topics or improvements /Chris What is the Render props pattern? The Render props pattern ...
Read full post
Collapse
 
codingsam profile image
Coding Sam •

I use this pattern all the time but using different names.
Usually I create a Container component that implements the behaviour (and do more stuff like redux store connection) and pass properties to the Dumb component that just does rendering according to the props.

As an example:

function SomeContainer (props) {
  const onContinue = useCallback(() => {
    console.log('Just clicked');
  });

  return <SomeComponent onContinue={onContinue} />
}

function SomeComponent (props) {
  const { onContinue } = props;

  return (
    <div>
      <span>You can continue now</span>
      <button onClick={onContinue}>Continue</button>
    </div>
  );
}
Collapse
 
nickytonline profile image
Nick Taylor •

Although I understand higher-order components (HOC) and have used them (mainly Redux), I always found them difficult to read and there is also a risk of overwriting props on the component being wrapped in the HOC.

Render props communicate better what's being used/available as props. And it separates functionality from UI potentially. A great example of this is Kent C. Dodds' Downshift.

Looking forward to your next post!

Collapse
 
jonocodes profile image
Jonathan Stiansen • • Edited

I really think you are doing new developers a disservice (probably old as well) by writing about render props. As of react hooks, this pattern is no longer needed and not a best practice, with hooks at least! Which is the recommended approach :-)

Collapse
 
softchris profile image
Chris Noring • • Edited

Hi Jonathan. This article is several months old. ( Syndicated from a medium post ). I do have an article about Hooks as well, dev.to/softchris/hooks-for-react-j... I reason like this: the adoption of Hooks doesn't seem to be so fast yet and meantime people still need to maintain their codebases.