A naukri.com initiative
Dev
4w
280
Image Credit: Dev
Context, Redux or Composition?
- The author of this article, a developer who was impacted by recent tech layoffs and started interviewing for frontend positions with React, shares experiences of being given a classical prop drilling problem with React to solve in an interview.
- The problem was to solve a prop drilling issue by either React Context API or by using Redux.
- The React Context solution involved creating a UserContext, which was wrapped around the Dashboard component, so that props could be passed down to a deeply nested child component. This solution works.
- The Redux solution required a similar structure as the Context solution, but with a ton of boilerplate added.
- The author solved the problem using composition by making use of the children prop. This turned out to be the easiest way to solve the problem without introducing any complexity like createContext or react-redux.
- Benefits of the composition solution include that DashboardNav never gets re-rendered, even if state is introduced inside Dashboard, and that the props are supplied only to the required components.
- The interviewer's feedback was that the author did not understand the problem correctly and was unable to provide the expected solution.
- The author is now motivated to write more about interesting patterns in React, hoping to reach a wider audience.
- The article contains references to more detailed solutions as well as relevant React documentation.
Read Full Article
16 Likes
For uninterrupted reading, download the app