is manually setting props of a component returned by a render prop considered bad practice?

let's say i have this component:

function Foo(props: {renderSomething: (param: any) => VNode}) {
    const rendered = props.renderSomething("hi theo");
    return (<>
        {rendered}
    </>)
}

function Foo(props: {renderSomething: (param: any) => VNode}) {
    const rendered = props.renderSomething("hi theo");
    return (<>
        {rendered}
    </>)
}

if i were to set one of rendered's props before returning from Foo like this:

rendered.props.bar = "bazzz"

rendered.props.bar = "bazzz"

would that be considered bad practice?

Solution:

```tsx function Foo(props: {renderSomething: (param: any) => VNode}) { const rendered = props.renderSomething("hi theo"); const derivedSomething = useMemo(() => { return {...rendered, someProp: 2}...

Jump to solution

6 Replies

Neto•6mo ago

yes and no why after calling renderSomething you would need to change the result manually but should work regardless

.❀ tablet ❀.OP•6mo ago

two words: bad architecture

Neto•6mo ago

derive it mutating a prop is bad bad bad

.❀ tablet ❀.OP•6mo ago

now that i think of it, i should use a context instead of "injecting" props posthumously

Neto•6mo ago

use a useMemo

Solution

Neto•6mo ago

function Foo(props: {renderSomething: (param: any) => VNode}) {
    const rendered = props.renderSomething("hi theo");
    const derivedSomething = useMemo(() => {
      return {...rendered, someProp: 2}
    }, [rendered])
    
    return (
      <>
        {rendered}
      </>
    )
}

function Foo(props: {renderSomething: (param: any) => VNode}) {
    const rendered = props.renderSomething("hi theo");
    const derivedSomething = useMemo(() => {
      return {...rendered, someProp: 2}
    }, [rendered])
    
    return (
      <>
        {rendered}
      </>
    )
}

Gaming

Programming

is manually setting props of a component returned by a render prop considered bad practice?