Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying React Anti-Patterns
  • Table Of Contents Toc
  • Feedback & Rating feedback
React Anti-Patterns

React Anti-Patterns

By : Juntao Qiu
4.8 (10)
close
close
React Anti-Patterns

React Anti-Patterns

4.8 (10)
By: Juntao Qiu

Overview of this book

Take your React development skills to the next level by examining common anti-patterns with expert insights and practical solutions, to refine your codebases into sophisticated and scalable creations. Through this easy-to-follow guide, React Anti-Patterns serves as a roadmap to elevating the efficiency and maintainability of your React projects. You’ll begin by familiarizing yourself with the essential aspects of React before exploring strategies for structuring React applications and creating well-organized, modular, and easy-to-maintain codebases. From identifying and addressing common anti-patterns using refactoring techniques to harnessing the power of test-driven development (TDD), you’ll learn about the tools and techniques necessary to create reliable and robust tests. As you advance, you’ll get to grips with business logic and design patterns that offer solutions to prevalent challenges faced in React development. The book also offers insights into using composition patterns, such as code splitting and multiple entry points, to enhance the flexibility and modularity of your React applications, guiding you through end-to-end project implementation. By the end of this React book, you’ll be able to overcome common challenges and pitfalls to transform your React projects into elegant, efficient, and maintainable codebases.
Table of Contents (20 chapters)
close
close
Free Chapter
1
Part 1:Introducing the Fundamentals
6
Part 2: Embracing Testing Techniques
10
Part 3: Unveiling Business Logic and Design Patterns
14
Part 4: Engaging in Practical Implementation

Using the Context API to resolve prop drilling

The concept behind using the Context API to address prop drilling is to create a shared container for all sub-components under a common parent. This eliminates the need for explicitly passing down props from parent to child. Sub-components can directly access the shared context whenever necessary. Another advantage of using the Context API is that it triggers automatic re-rendering of components whenever the data within the context changes.

Returning to our searchable list example, which has already got the props drilling issue, onItemClicked in the List component isn’t necessary as List doesn’t use the prop. This scenario involves just one layer and one prop. Now, envision a situation where we need to insert additional elements between the List and ListItem components; we would have to pass the onItemClicked prop down to where it’s utilized. The complexity is amplified if we have multiple props to relay.

The...

Unlock full access

Continue reading for free

A Packt free trial gives you instant online access to our library of over 7000 practical eBooks and videos, constantly updated with the latest in tech
bookmark search playlist download font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete

Confirmation

Modal Close icon
claim successful

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY