Skip to content

[Why]:The advantage of calling the render prop as a function instead of as a component with React.createElement is that the consumer can compose methods inline using anonymous arrow functions without triggering an unmount/mount each time. #7392

Open
@Mori-Young

Description

          > The advantage of calling the render prop as a function instead of as a component with React.createElement is that the consumer can compose methods inline using anonymous arrow functions without triggering an unmount/mount each time. This is because React uses the function/class name to determine whether a node could be reused.

Here's a Codepen demonstrating different scenarios: https://codepen.io/alexkrolick/pen/WZwMYW

There was some discussion in the original PR for this doc: facebook/react#10741

[ 30631908-f044d696-9d9a-11e7-8582-1ab3dfcbb8c3.gif ]

@alexkrolick

Hello, I am a newbie and recently came into contact with render prop. I have a question for you: How to define re-rendering? I tried to print in the Inline of <RenderWithFoo render={Inline} />, and it was also executed during re-rendering. My definition of re-rendering is that React will execute the function component and reconstruct a new virtual node struct.

Originally posted by @Ys-OoO in #1241 (comment)

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions