Chapter 8. Scaling React components
This chapter covers
- Setting default properties for components
- Understanding React property types and validation
- Rendering children
- Creating higher-order components for code reuse
- Best practices: presentational versus container components
Thus far, we’ve covered how to create components and make them interactive, and work with user input (events and input elements). Using this knowledge will take you a long way in building sites with React components, but you’ll notice that certain annoyances keep cropping up. This is especially true for large projects when you rely on components created by other software engineers (open source contributors or your teammates).
For example, when you consume a component someone else wrote, how do you know whether you’re providing the right properties for it? Also, how can you use an existing component with a little added functionality (which is also applied to other components)? These are developmental scalability issues: how to scale your code, meaning how to work with your code when the code base grows larger. Certain features and patterns in React can help with that.
These topics are important if you’d like to learn how to effectively build a complex React application. For example, higher-order components allow you to enhance the functionality of a component, and property types provide the security of type checking and no small measure of sanity.