[Suggestion]: Add a new page for how to communicate between components.

[woochanleee]

Summary

Add a new page for how to communicate between components.

Page

No response

Details

I think it would be helpful to have a page that explains how to communicate between components. This could include a best practice example of a communication between two components that don't have a parent-child relationship.

In the past, old React docs already had these content.
https://web.archive.org/web/20151124041030/http://facebook.github.io:80/react/tips/communicate-between-components.html

References

https://stackoverflow.com/questions/21285923/how-can-i-communicate-between-related-react-components#comment45951998_21285923

[rickhanlonii]

This is documented on these pages, depending on what you're looking to achieve:

• Passing props to a component
• Passing event handlers as props
• Sharing state between components
• Passing data deeply with context

The .bind specific technique is briefly mentioned in the Legacy Component docs here, but createReactClass is deprecated and will not be added to the new site. See the legacy site for createReactClass docs.

[woochanleee]

Nowhere in the documentation does it say.

For communication between two components that don't have a parent-child relationship, you can set up your own global event system. (Old React Docs said)

Is using a global event system not a good practice and only using context(or lifting state up) is best practice?

[rickhanlonii]

Correct, the only way to do it safely with concurrent features today is to de-opt with useSyncExternalStore, which has limitation such as forcing fallbacks for existing content. We're aware this is a pain point, though we don't have any solutions to recommend until we build better support for it.

[woochanleee]

Thank you. I found an example that uses useSyncExternal, I'll check it out.

facebook/react#14988 (comment)
https://codesandbox.io/p/sandbox/hopeful-sara-fb970f?file=%2Fsrc%2Findex.js%3A1%2C1-47%2C1

I would be happy if React provided a built-in event emitter system like Angular, Vue. 😄