I build pages with both React and non-React components, and sometimes all these components need to talk to each other. Examples include opening a React modal when a customer clicks a button or updating a text block when a customer adds a product from a React stepper. There are many ways to do this, but in my opinion, the best way is to use custom events.
Read more of Talk to your React components with custom events →
As a junior developer, my number one problem was creating premature abstractions. Nowhere was this more evident than my React components.
Read more of How to avoid premature abstractions in React →
Updated: I’ve updated the code to export a named function, not an anonymous arrow function. When I first started using React, I learned about Presentational and Container Components from Dan Abramov. This pattern prescribed splitting UI into smart (container) components that encapsulated state and logic, and dumb (presentational) components that simply presented data in a styled manner. In general, the containers were class components that managed state and lifecycle methods, whereas presentational components were stateless function components.
Read more of React Presentational and Container Components Using Context and Hooks →