How to use shared component reference in React?

Viewed 76

I have a requirement where I have to render Component A twice in the Container, one at the top and one at the bottom.

Both the components should be in sync , changes made at one place should be reflected at other place, Component should not mount twice as there's lot of API calls being made inside componentDidMount of Component A.

Is there any approach to do it, without lifting the state up?

Image for the above requirement

1 Answers

A component is an independent entity in react. It has it's own state and own set of variables. If you don't lift your state to the parent and then pass to the component A. It is not possible to use same component on same page twice with the same set of state without component being rendered two times.

You must lift state to their parent and then only it can be achieved or else it is not possible.

Related