ReactJs patterns - A study based on google search

The content here is under the Attribution 4.0 International (CC BY 4.0) license

ReactJS is among one of the most used javascript library according to GitHub it is one of the mos popular started repository. Given its popularity it is expected that the community around it will start to develop techniques, guides and tutorials around patterns.

Inspired by the software systematic review literature paper [1], that collects a broader overview of the software engineering success and failure factors, this post has the goal to answer the following questions:

• Q1. What is the most popular ReactJS pattern?
• Q2. What are the themes that appears related to the patterns?

Opposed to the scientific method presented by the authors (the research was conducted mining scientific bases, named: IEEE explorer, ACM digital library, science direct, springer link, scopus and engineering village), this post is a collection based on google search.

Besides the questions to be answered in this post, the aim is also to be a source to access when in doubt of which reactjs pattern to learn first and also a guide to help beginners to have a picture of the patterns that developers most talk about.

Finding reactjs patterns articles

Google blocks the crawling on search, in this case the approach taken was the google custom search (https://stackoverflow.com/a/30041104/2258921). The custom search (https://developers.google.com/custom-search/v1/using_rest) API allow developers to use google search programmatically, and works as google search, the difference is that this integration allow calls programmatically.

The first interaction with the API showed a particular behavior that this service has, as pointed by [2], the total number in the result is not the real number, it is an approximation.

The search string used for explore the first researching question, was “reactjs patterns”. Searching for this string in google.com, in the first page is shown 904 results. Executing the same query through the programmable search gives 161 results, and mining the results through the API, gives 96 results. This behavior is expected as pointed by [2].

To mine the results a javascript file was developed, the script executes recursively based on the number of pages that google returns till the last page of results for a given search string. In total 96 links were found and saved to a XLS file [3] for further analysis described in the next section. Furthermore, the code used to search and generate the XLS file is available on github.

Mining results

A manual analysis of the results was made in the following steps:

1. Removed results that does not have reactjs patterns discussions, such as explaining a pattern or listing a pattern.
2. Classify each search result into a category.

For 1, a manual approach was taken to go through each item in the search result to apply the exclusion criteria. As result 14 items were removed [3] (the removed content can be found in the tab “mined”).

For 2, the following categories were created to group the search results: book, course, meetup, post, question, slides, video. The categories were generated based on a manual review of each item.

The category post is the most popular, followed by course and book, question and video have the same number of items (2) and in the last two spots are meetup and slides.

Analyzing the results

This section dives into the results found, presents a brief explanation of each item in the list. Therefore, this section does not cover the categories question, meetup, video and slides as they present less than three items.

Posts

The post category is the most popular with 66, as a first exploration the posts were read, and for each of them a pattern name was manually assigned, based on the content of the post. Most of them have more than one pattern associated with it, for example, the first post, in the list covered 22 patterns.

This process was repeated for each post in the list. Once the classification was done, the word cloud [4] visualization was generated (the process is described in the next sentence).

The raw classification was processed using the following steps:

1. Similar words were normalized, the word “component” and “components” were normalized to the word without s (singular form), resulting in “component”
2. Words with capital letter were normalized to use the lower case.
3. Different words used with common mean were normalized, for example, the higher order component is commonly used as HoC, the shorter version was used.

The word cloud depicts the translation between the most cited patterns used in the dataset. The most cited pattern is Component, followed by props taking into consideration just a single word.

Discussion

This section dive deeper in the results depicted in the previous section, the first sub section focus on Q1 and the second section focuses on Q2.

Q1

For Q1, based on the pure pattern classification the results point to the most popular pattern being the “component”, followed by “props” which are the foundation of ReactJs, as everything is a component, and communication happens via props. A first hypothesis into this result is the repetition of those two patterns to explain more complex ones, for developers that are starting into the reactjs, components and props are the first principles to understand.

In addition to that complex patterns such as hooks and higher order components appear surrounding the component and prop pattern. Those are the patterns which requires from the developer a previous understanding of props and components as they are more complex, which in turn, can lead to less content related to those patterns.

Q2

For Q2 the surrounding elements are the focus, so for example, terms like best practices and design were found and are related to reactjs patterns.

As such, [5], entitled “Clean Code vs. Dirty Code: React Best Practices”, enumerates 14 sections about best practices. Those sections are related to code standards, javascript features, naming variables and also about industry standard to follow when coding like DRY.

Related work

This section dives in the content of each post mined and group them in the different patterns found. It is possible for the same post to appear in different sections, as the content might explore more than one at time.

Container component

[6] uses the Jason Bonta’s definition of the container component: the container component fetches data, and then renders it’s corresponding sub component. That’s it. [7] and [8] agrees on the same definition as [6] and adds that, the container component is the place to connect to redux.

The following code (adapted from [6]) depicts the container component using class component. [9] also offers a code example.

import React, { useState, useEffect } from 'react'

const CommentList = ({ comments }) => (
  <ul>
    {comments.map(comment => (
      <li>
        {comment.body}-{comment.author}
      </li>
    ))}
  </ul>
);

function CommentListContainer {
  const [comments, setComments] = useState([]])

  useEffect(() => {
    fetch('/my-comments.json')
      .then(response => response.json())
      .then(comments => setComments(comments)
  }, [])

  render() {
    return <CommentList comments={comments} />
  }
}

[10] elaborates on the container component with hooks along side with a to-do list app that implements the pattern. Also the definition followed was the same as [6], it seems that there is a consensus that Jason Bonta defined the container component pattern and developers point to him. [11] rates the container component as a pattern that provides: separation of concerns, it is reusable and it is testable.

[12] expands on the idea that container component is aware of redux, the same argument made by [6], but in this case, the author gives “the internet” the credit to agree on that. [13] has somehow a not so clean definition about container component, also the text mix HoC with presentational components and other patterns.

Conditional rendering

[14] gives his opinions on the conditional rendering pattern and also states that it is a natural step for developers to separate logic from the actual return code (the code given as example is a ternary if). As an alternative to the conditional rendering, the author suggests to use the JSX alternative with &&. [15] expands on the JSX alternatives for conditional rendering.

Compound Components

[16] and [17] share the same definition, the compound components are components that are distinct, but does not work without the other, they make sense together only. Furthermore, [16] mentions the HTML select and option as an example of compound components. [18] uses the compound component pattern to build a radio group component, which the user can select only one option between the available options.

Decorated component

The decorated component is a pattern that does not not appear often, [19] demonstrates the decorated component as a way to decouple components, or even to enhance component features, Redux uses the decorated component pattern to enhance the component props.

Therefore, the decorated pattern can be used as a way to decouple the component that fetch data with the one that actually uses the data. [13] states that the decorated pattern is the same as HoC.

Higher-Order-Component

[14] and [13] agree on the definition that HoC, in a sense that HoC are decorators. [16] though, has an argument that the HoC name is misnomer, which is based on his own thoughts.

A HoC takes a reactjs component enhances it and then returns the new enhanced component to be used [17] [9] [20] [21] [22] [23].

[24] has a different definition, which states that the HoC receives a component as an argument and returns another component. This definition is wider than the previous one. Often the HoC receives a component and enhance the same component functionality, and returns the same component with added behavior, from [24] would be possible to receive A and then return B.

Therefore, [25] states that HoC is responsible to fetch data and then propagate to child components. This definition is an addition to the previous agreed definition, but does not restrict the pattern to be used as data fetch only. [26] adds that the HoC is used to fetch data and also split data fetching from data presentation. For the first time, the HoC is compared as a container pattern and not the decorated component pattern.

[27] explores the HoC in the new era of react hooks. [28] has no definition statement, though the content is followed with HoC code examples.

Render Props / Render callback

The render props or render callback pattern is used to render a given component based on a function callback [6] [17] [7] [20] [11], or as [29] states, instead of rendering the children (which is as common technique in reactjs), this pattern renders the prop. Even though [29] states that the render prop renders the prop, instead of the children, [27],[26] and [30] describes the render prop using the children explicitly.

Furthermore [14] states that the pattern render props and HoC are interchangeable. The term render callback is clearer in the intention of the pattern, but the term, render props got more adoption from the community [31]. On the other hand [9], states that there is discussion between the effectiveness of the pattern.

Provider / Context

The provider pattern is used in libraries such as react-redux and react-router. The idea behind the provider pattern is to avoid passing props for each component in the three, instead, the pattern makes, the prop available for all the tree that uses the provider regardless of the tree depth [16]. The provider pattern is an answer for the problem called props-drilling [33] [34].

The provider pattern is often related to reactjs context [14] [33] as this is the feature that comes out of the box with reactjs.

[35] says that if the component needs to share more than two levels deep, the recommended approach is to use reactjs context. [36] uses the provider/context pattern to implement a translation engine.

Hooks

Hooks are the highlight feature introduced in reactjs 16.8, mainly focused in sharing logic between components and no class syntax, instead, a functional approach is the preferred way[37][38]. [39] gives a introduction followed with reactjs hooks best practices, the material is recommended to any level of developer that wants to understand hooks, or for any developer that already knows hooks, it can be a refresher. [40] also states that hooks replace the mixins pattern for sharing code.

[27] depicts the difference between class components and functional components with hooks and th benefits of using it. [25] and [26] compares fetching data between the class approach and the functional approach with hooks, however [10] refactor the container pattern using the class style with hooks.

[41] integrates the facade design pattern into a javascript implementation, and then combines the pattern with reactjs hooks. [42] builds a to-do app using hooks and uses a folder name called models to store custom hooks, and tries to relate this structure with the MVC pattern.

[43] and [44] focus on the state management. [43] dives in mocking the redux implementation using hooks. The approach used is interesting for learning purposes. Therefore, the implementation for both authors are simplifications over a more complex implementation of redux. The benefits of implementing those state managements by hand comes with a drawback. Redux on the other hand is more complex, but it is a standard for state management, having a wide community that created different libraries to work with it (redux-offline).

Finally, [45] converts the BLoC pattern to be used with reactjs. The BLoC pattern was created to share code between flutter and angular dart.

Redux

The redux pattern is an implementation of FLUX, the state management pattern created by Facebook to handle global state [52][53]. [54] provides an introduction to redux and its main components, namely: Action, Reducer and Store.

Conclusion

ReactJs is among the most used UI libraries, as a result it has a lot of content created by the community and by Facebook (which is the company behind rectJS). The proposed study showed the most used reactjs patterns as well as the themes that surround the patterns. As it tuns out, the most popular patterns are components and props, which are the reactjs foundation and not advanced patterns for experienced reactjs developers. On the other hand, patterns like Higher order components, hooks and container component requires some previous knowledge to be used effectively, but those patterns that require more experience are the ones less popular as well.

References

1. [1]D. A. Tamburri et al., “Success and Failure in Software Engineering: a Followup Systematic Literature Review,” 2020.
2. [2]D. (G. Employee), “Нow can I get 2500 results in one request in Google Search API?,” 2020 [Online]. Available at: https://support.google.com/programmable-search/thread/55399640?hl=en. [Accessed: 25-Jun-2020]
3. [3]M. Marabesi, “ReactJs patterns - A study based on google search,” 2020 [Online]. Available at: https://docs.google.com/spreadsheets/d/e/2PACX-1vQvRdZOhkjolPlZ2td_3ocWJJwNoqvqInC-pAuECNDNMAEyjYa2nPZ6LLSwkR-Vrw/pubhtml. [Accessed: 05-Aug-2020]
4. [4]A. Mueller, “word_cloud,” 2020 [Online]. Available at: https://github.com/amueller/word_cloud. [Accessed: 05-Aug-2020]
5. [5]D. West, “Clean Code vs. Dirty Code: React Best Practices - American ...,” 2017 [Online]. Available at: https://americanexpress.io/clean-code-dirty-code. [Accessed: 16-Nov-2017]
6. [6]M. Chan, “React Patterns on GitHub,” 2020 [Online]. Available at: https://reactpatterns.com. [Accessed: 11-Jul-2020]
7. [7]G. Matheus, “React Component Patterns - Level Up Coding,” 2017 [Online]. Available at: https://levelup.gitconnected.com/react-component-patterns-ab1f09be2c82. [Accessed: 26-Oct-2017]
8. [8]C. Yick, “Simple React Design Patterns: Container/View - serendipidata,” 2019 [Online]. Available at: https://www.serendipidata.com/posts/react-design-patterns-container-view. [Accessed: 15-Feb-2019]
9. [9]L. Reis, “Simple React Patterns,” 2017 [Online]. Available at: https://lucasmreis.github.io/blog/simple-react-patterns. [Accessed: 08-Oct-2017]
10. [10]S. Recio, “Implementing the Container Pattern using React Hooks,” 2019 [Online]. Available at: https://blog.bitsrc.io/implementing-the-container-pattern-using-react-hooks-f490a8492d05. [Accessed: 31-Dec-2019]
11. [11]B. Williams, “Introduction to React Design Patterns | DrupalCon,” 2018 [Online]. Available at: https://events.drupal.org/nashville2018/sessions/intro-react-design-patterns. [Accessed: 11-Apr-2018]
12. [12]S. DeBenedetto, “The React + Redux Container Pattern,” 2016 [Online]. Available at: https://www.thegreatcodeadventure.com/the-react-plus-redux-container-pattern/. [Accessed: 16-Nov-2016]
13. [13]B. Kulbida, “2019 ReactJS Best Practices,” 2019 [Online]. Available at: https://medium.com/@konstankino/2019-reactjs-best-practices-design-patterns-516e1c3ca06a. [Accessed: 09-Mar-2019]
14. [14]A. Moldovan, “Evolving Patterns in React,” 2018 [Online]. Available at: https://www.freecodecamp.org/news/evolving-patterns-in-react-116140e5fe8f. [Accessed: 04-Feb-2018]
15. [15]C. Rippon, “React Conditional Rendering Patterns | Building SPAs,” 2018 [Online]. Available at: https://www.carlrippon.com/react-conditional-rendering-patterns. [Accessed: 17-Apr-2018]
16. [16]K. C. Dodds, “Advanced React Component Patterns,” 2017 [Online]. Available at: https://kentcdodds.com/blog/advanced-react-component-patterns. [Accessed: 05-Dec-2017]
17. [17]Y. Aabed, “Five Ways to Advanced React Patterns - DEV,” 2019 [Online]. Available at: https://dev.to/yazanaabed/five-ways-to-advanced-react-patterns-2bai. [Accessed: 02-Apr-2019]
18. [18]T. Deekens, “Seven patterns by example: The many ways to type=’radio’ in React,” 2017 [Online]. Available at: https://techblog.commercetools.com/seven-patterns-by-example-the-many-ways-to-type-radio-in-react-bfe14322bb6f. [Accessed: 20-Dec-2017]
19. [19]Zemuldo, “Zemuldo Blog - Patterns For Testable React Components,” 2019 [Online]. Available at: https://zemuldo.com/blog/patterns-for-testable-react-components-5e0a5b01bb17500012abfe11. [Accessed: 30-Dec-2019]
20. [20]L. Maldonado, “Advanced Patterns in React,” 2019 [Online]. Available at: https://www.telerik.com/blogs/advanced-patterns-in-react. [Accessed: 09-Apr-2019]
21. [21]Krasimir, “React.js in patterns,” 2016 [Online]. Available at: https://krasimirtsonev.com/blog/article/react-js-in-design-patterns. [Accessed: 20-Jul-2016]
22. [22]J. Franklin, “Higher-order Components: A React Application Design Pattern ...,” 2017 [Online]. Available at: https://www.sitepoint.com/react-higher-order-components. [Accessed: 08-Sep-2017]
23. [23]R. O. B. I. N. WIERUCH, “React Component Types: A complete Overview - RWieruch,” 2019 [Online]. Available at: https://www.robinwieruch.de/react-component-types. [Accessed: 12-Mar-2019]
24. [24]T. Konrády, “React patterns | React and Ramda patterns,” 2018 [Online]. Available at: https://tommmyy.github.io/ramda-react-redux-patterns/pages/react-ramda.html. [Accessed: 27-Sep-2020]
25. [25]G. Sayfan, “Patterns for data fetching in React - LogRocket Blog,” 2019 [Online]. Available at: https://blog.logrocket.com/patterns-for-data-fetching-in-react-981ced7e5c56. [Accessed: 24-Mar-2019]
26. [26]A. Mansour, “5 React Data-Fetching Patterns - Nordschool,” 2019 [Online]. Available at: https://nordschool.com/react-data-fetching. [Accessed: 23-Oct-2019]
27. [27]N. Kulas, “How advanced React patterns changed with hooks | Sunscrapers,” 2019 [Online]. Available at: https://sunscrapers.com/blog/how-advanced-react-patterns-changed-with-hooks. [Accessed: 01-Jul-2019]
28. [28]B. Jackson, “Patterns for Style Composition in React | Jxnblk,” 2016 [Online]. Available at: https://jxnblk.com/blog/patterns-for-style-composition-in-react. [Accessed: 13-Aug-2016]
29. [29]S. D. Hutch, “How To Master Advanced React Design Patterns — Render Props,” 2018 [Online]. Available at: https://itnext.io/using-advanced-design-patterns-to-create-flexible-and-reusable-react-components-part-3-render-d7517dfe72bc. [Accessed: 17-Apr-2018]
30. [30]T. Ehrlich, “Common i18n patterns in React — LinguiJS documentation,” 2018 [Online]. Available at: https://lingui.js.org/tutorials/react-patterns.html. [Accessed: 27-Sep-2020]
31. [31]L. G. Crespo, “React Patterns - Render Callback | Lenny’s Blog,” 2020 [Online]. Available at: https://leoasis.github.io/posts/2017/03/27/react-patterns-render-callback. [Accessed: 27-Sep-2020]
32. [32]Matt, “React’s State Reducer Pattern - DSC Engineering,” 2019 [Online]. Available at: https://engineering.dollarshaveclub.com/reacts-state-reducer-pattern-f66e82a82697. [Accessed: 19-Sep-2019]
33. [33]G. Thakur, “Provider Pattern in React using React Context API,” 2019 [Online]. Available at: https://blog.flexiple.com/provider-pattern-with-react-context-api. [Accessed: 02-Feb-2019]
34. [34]A. Farmer, “8 no-Flux strategies for React component communication,” 2020 [Online]. Available at: https://www.javascriptstuff.com/component-communication/. [Accessed: 27-Sep-2020]
35. [35]D. A. I. S. H. I. KATO, “Four patterns for global state with React hooks: Context or Redux ...,” 2019 [Online]. Available at: https://blog.axlight.com/posts/four-patterns-for-global-state-with-react-hooks-context-or-redux. [Accessed: 27-Apr-2019]
36. [36]G. Babiars, “AngularJS Patterns in React | Greg Babiars’s Blog,” 2019 [Online]. Available at: https://gregbabiars.com/angular-patterns-in-react/. [Accessed: 29-Apr-2019]
37. [37]reactjs.org, “Introducing Hooks,” 2020 [Online]. Available at: https://reactjs.org/docs/hooks-intro.html. [Accessed: 26-Sep-2020]
38. [38]C. Wilson, “React hooks design patterns and creating components without class,” 2019 [Online]. Available at: https://www.educative.io/blog/react-hooks-components-and-design-patterns. [Accessed: 18-Jul-2019]
39. [39]D. Adeneye, “Best Practices With React Hooks — Smashing Magazine,” 2020 [Online]. Available at: https://www.smashingmagazine.com/2020/04/react-hooks-best-practices. [Accessed: 27-Sep-2020]
40. [40]B. McCormick, “Reusable Code In React: Inheritance, Composition, Decorators and ...,” 2020 [Online]. Available at: https://benmccormick.org/2019/02/11/reusable-react. [Accessed: 27-Sep-2020]
41. [41]M. Wanago, “The Facade pattern and applying it to React Hooks,” 2019 [Online]. Available at: https://wanago.io/2019/12/09/javascript-design-patterns-facade-react-hooks. [Accessed: 09-Dec-2019]
42. [42]A. Burdette, “Production-Level Patterns for React Hooks | FullStack Labs” [Online]. Available at: https://www.fullstacklabs.co/blog/production-level-patterns-for-react-hooks
43. [43]T. Linsley, “React Hooks, the rebirth of State Management and beyond.,” 2020 [Online]. Available at: https://blog.usejournal.com/react-hooks-the-rebirth-of-state-management-and-beyond-7d84f6026d87. [Accessed: 27-Sep-2020]
44. [44]M. Lynch, “A state management pattern for Ionic React with React Hooks | The ...,” 2020 [Online]. Available at: https://ionicframework.com/blog/a-state-management-pattern-for-ionic-react-with-react-hooks. [Accessed: 27-Sep-2020]
45. [45]Martin, “BLoC Pattern with React Hooks — magarcia,” 2020 [Online]. Available at: https://magarcia.io/2019/02/18/bloc-pattern-with-react-hooks. [Accessed: 27-Sep-2020]
46. [46]M. Pekala, “Discovering patterns with React hooks,” 2019 [Online]. Available at: https://ponyfoo.com/articles/discovering-patterns-with-react-hooks. [Accessed: 13-Apr-2019]
47. [47]K. Ball, “Friday Frontend: New React Patterns,” 2019 [Online]. Available at: https://zendev.com/2019/05/17/new-react-patterns-edition.html. [Accessed: 17-Apr-2019]
48. [48]A. Ray, “The ReactJS Controller View Pattern,” 2015 [Online]. Available at: http://blog.andrewray.me/the-reactjs-controller-view-pattern. [Accessed: 07-Jul-2015]
49. [49]S. G. Team, “Using the Adapter Design Pattern With React | SendGrid,” 2018 [Online]. Available at: https://sendgrid.com/blog/using-the-adapter-design-pattern-with-react. [Accessed: 26-Jun-2018]
50. [50]K. Tsonev, “Dependency injection · React in patterns,” 2020 [Online]. Available at: https://krasimir.gitbooks.io/react-in-patterns/chapter-10. [Accessed: 27-Sep-2020]
51. [51]T. Sallai, “Global listener patterns in React - Advanced Web Machinery,” 2016 [Online]. Available at: https://advancedweb.hu/global-listener-patterns-in-react/. [Accessed: 05-Jan-2016]
52. [52]Facebook, “Flux - Application architecture for building user interfaces,” 2020 [Online]. Available at: https://facebook.github.io/flux. [Accessed: 27-Sep-2020]
53. [53]G. Fink, “Getting to Know the Redux Pattern | DotNetCurry,” 2020 [Online]. Available at: https://www.dotnetcurry.com/reactjs/1356/redux-pattern-tutorial. [Accessed: 27-Sep-2020]
54. [54]P. J. Frias, “Redux design patterns & Reduxsauce,” 2020 [Online]. Available at: https://blog.smartlogic.io/redux-design-patterns-reduxsauce. [Accessed: 27-Sep-2020]
55. [55]D. Vincijanovic, “Level up your React architecture with MVVM - COBE,” 2018 [Online]. Available at: https://medium.cobeisfresh.com/level-up-your-react-architecture-with-mvvm-a471979e3f21. [Accessed: 30-Aug-2018]

Appendix

This section presents extra resources created during the development of this content.

Mined content

On the Title column, the original title from the source was preserved and on the right a short abstract was provided to illustrate what the source content is about.

Web almanac css

Web almanac [65] is a research that focus on the web features used in the wild.

Dev patterns

Dev patterns seems to be the next generation for this blog post, it expands the focus and what is covered here. Not only react, but focused on the web ecosystem.