Hooks added to Woven React Scenario

Written BY

Josh Colter
August 10, 2021

Hooks added to Woven React Scenario

Hooks showed up with React 16.8. They’ve since become the modern standard to use state and other React features without writing a class. So we’re incorporating them into Woven’s scenario library to keep our assessments up-to-date for engineering teams.

What’s the problem?

React is a JavaScript library that can be used to build reusable and easily-maintainable user interfaces.

It’s often challenging to separate a large UI into small, independent reusable pieces because the logic cannot be extracted. We can't break down complex components any further when stateful data needs to stay with specific parts of the app that would require us to add more libraries or higher levels of complexity in order for it to work efficiently. 

Although it has many benefits, React doesn’t always allow you to create smaller component-level behaviors without adding unnecessary layers and complexities. That’s what people mean when they say React doesn’t let them “separate concerns.”

Why React Hooks

Enter React Hooks. Hooks is a library that gives React the ability to store stateful logic in one component and use it across many components. 

Think of Hooks like an abstraction layer for updating props. Using hooks, you’re able to extract out logic from your codebase without going back through entire files each time there's something new added that needs testing. This makes debugging much easier!

Many engineers like using Hooks because they feel less confused trying to understand how an application works. Since everything happens inside just one file, there’s less jumping around between files to add/delete lines. It’s an efficient way to create reusable, testable functions that can be used in many different situations.

Here’s a video of Ryan Florence demonstrating how to refactor an application to use Hooks:


Woven Supports React Hooks

Woven’s scenario library for technical assessments includes a Change Password Alert exercise that already includes React. We built a new version of this scenario that defaults to using Hooks in the starter code rather than class components. So now engineering teams can choose to evaluate work simulations with Hooks or class components.

Scenarios will update to this version on Thursday, 8/12. If you’d prefer to continue using the React class components version of this scenario, just let us know and we’ll enable the previous scenario version.



More helpful reference resources for React Hooks:

Hooks overview

Hooks API reference

React Hook resources on Github