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

@Mori-Yang

Description

@Mori-Yang
          > 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

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions