30 Jun

Refactoring React with Tests

In today's video we'll see how we can take a React component that is doing too much and split it into multiple components. We'll look at how you can spot if a component needs breaking up and how we can use the tests to ensure we're maintaining functionality and how they help guide us towards a better implementation.

As you work on a React application it’s highly likely that you’ll encounter components that have grown over time. They may have started with just one particular use case in mind, but will have been added to since. This can lead to complex render methods and code that’s hard to follow.

In this video you’ll see how to spot components that need some work doing, how we test these components, and how we use the tests to guide us, splitting one component into two much more straightforward ones.

PS: it’s definitely worth making the video fullscreen or viewing on Youtube so you can see things more clearly.


If you’d like to play with this code, you can find the repository on GitHub, and feel free to raise any questions via GitHub issues on that repository.

If you enjoyed this post, signup to the newsletter to be notified when there's new content, new courses and exclusive offers.

If you enjoyed this article please feel free to share it on Twitter.