You are on page 1of 2

React BigForms 

Forms in React can involve some boilerplate which people try to generalize themselves 
or use 3rd party libraries to help with avoiding code duplication. 

Additional concerns come into play when dealing with special use-cases where there 
can be a huge number of elements on screen - say 1000-2000 or even more. (One 
example could be an excel-like view of rows of objects and columns of fields). 

Such a library would be careful in minimizing the amount of rendering and processing 
that happens for each field on the form. 

If you want to keep things flexible, your generalization would also cater to allowing 
users to fully control the visuals of their elements. 

The Assignment 

Create a mini-library that will let us efficiently handle forms with a large number of 
elements while staying flexible to user  

● The code should be reusable across multiple forms 


● It should be able to handle 1000-2000 form elements without making the form 
unresponsive during usage 
● Allow the user to be able to handle nested form data and arrays of data 
elegantly (eg. a user-profile form that allows the user to add multiple addresses) 
● The user should be allowed to use his own custom UI elements for his form (eg. 
be easily able to integrate with components from libs such as 
material-ui/semantic-ui/etc) 
● Have an example that shows how to use your library to create and manage a 
large form. 

Bonus 

● Figure out a user-friendly solution that allows the user to specify validation 
conditions on various fields. 
● Show us that you can write unit tests for your code. 

Notes 
● You can use JavaScript or TypeScript - whichever you prefer. To save time, you 
can bootstrap from the `create-react-app` project. 
● You should not use any existing form library, but using utility libraries like lodash 
is okay. 
● Try and complete the assignment in the given time. It's totally fine if it's not 
complete. We would love to see the assignment anyway. 

● Prioritize your work - try to work on the most important features first to be able 
to get to a working solution. 

● Call us if you have trouble understanding anything. 

You might also like