Refs assigned to effects are always undefined about react-postprocessing

[drcmda]

What's reacts error when you merge? I use mergerefs all the time and never saw a warning, must be something else imo

[talentlessguy]

@drcmda here is the error I get:

Warning: [object Object]: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop.

it happens when I try to merge refs[i] and el.props.ref

here's a demo of this case: https://codesandbox.io/s/trying-to-get-effect-ref-9zzl1?file=/src/App.js

[drcmda]

try clone in that case https://reactjs.org/docs/react-api.html#cloneelement

Clone and return a new React element using element as the starting point. The resulting element will have the original element’s props with the new props merged in shallowly. New children will replace existing children. key and ref from the original element will be preserved.

[talentlessguy]

@drcmda maybe I'm using this wrong but it's still { current: undefined } :/

I used this StackOverflow answer so the code looks like this:

https://github.com/react-spring/react-postprocessing/blob/ab4030d2537d844e89e1e367c440aa947d509f8e/src/EffectComposer.tsx#L65-L71

and in demo it looks like this:

https://github.com/react-spring/react-postprocessing/blob/3a89610a586326e5b78d7fb325053efd49326788/examples/pages/outline.jsx#L10-L40

Even if it is said that cloneElement preserves refs, looks like here it gets overidden anyway.

[talentlessguy]

I've set up a codesandbox to debug the composer easier, but still no result yet :/

https://codesandbox.io/s/boring-noether-7uli0?file=/src/components/EffectComposer.tsx

it's being undefined

[talentlessguy]

@drcmda so I talked to some guys in a React chat on Telegram and came to a conclusion that the whole EffectComposer implementation is wrong. We cannot merge refs, neither we can't assign them because they are occupied already even with cloneElement

I think that it's worth trying to implement it with children again, but there is a problem with state.... we can't have state if don't render children but just map through them and send to EffectPass

any ideas?

should I keep the existing implementation and keep trying to make it work (but I honestly don't know what else to try)

or it's better to completely rewrite the composer and effects?

[talentlessguy]

I think I got something: https://codesandbox.io/s/intelligent-dhawan-yo4lj?file=/src/App.tsx

might be some unexpected problems though

[talentlessguy]

Fixed in last version, works nicely!