Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to partially apply a React component?

Say I have a <Button> component which takes two properties: text and id e.g.,

<Button text="delete" id="123"/>

Now say I have a list of user ids: [101, 102, 103, …]

Would it be possible to partially apply <Button>? e.g.,

ids.map(<Button text="delete" id={__}>)

Where __ is just a placeholder waiting to be replaced with the current id.

If it was possible, would partially applying a React component have any adverse effect on the React Reconciliation Algorithm?

like image 301
customcommander Avatar asked Jan 20 '21 14:01

customcommander


People also ask

What is conditional component in React?

In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application. Conditional rendering in React works the same way conditions work in JavaScript.

Does React Rerender whole component?

As we already saw before, React re-renders a component when you call the setState function to change the state (or the provided function from the useState hook in function components). As a result, the child components only update when the parent component's state changes with one of those functions.

Does a React component have to render?

render() The render() method is the only required method in a class component. When called, it should examine this.props and this.state and return one of the following types: React elements.

Are all React components pure?

A React component is considered pure if it renders the same output for the same state and props. For this type of class component, React provides the PureComponent base class. Class components that extend the React. PureComponent class are treated as pure components.


1 Answers

You could use two ways

one, which is not really a partial

ids.map((id)=><Button text="delete" id={id} />)

and the partial one which is really extracting the function above and using it

const PartialDeleteButton = (id) => <Button text="delete" id={id} />

ids.map(PartialDeleteButton)

which you could also use as

<PartialDeleteButton id={5} />

i cannot see how these would affect the reconciliation algorithm

like image 146
Gabriele Petrioli Avatar answered Oct 13 '22 00:10

Gabriele Petrioli