ReactJs patterns - A study based on google search

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 communicty 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.

Table of contents

  1. Finding reactjs patterns articles
  2. Mining results
  3. Analyzing the results
  4. Discussion
  5. Related work
  6. Conclusion
  7. References
  8. Appendix

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 programatically, and works as google search, the difference is that this integration allow calls progammatically.

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.

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.

Category Total
post 66
course 7
book 3
question 2
video 2
meetup 1
slides 1

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 the 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).

Word cloud generated based on the classification

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.

lollipop graph

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, (missing reference), entitled “Clean Code vs. Dirty Code: React Best Practices”, enumarates 14 sections about best practices. Those sections are related to code standards, javascript features, naming variables and also about industry standard to follo when coding like DRY.

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

[5] 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. [6] and [7] agrees on the same definition as [5] and adds that, the container component is the place to connect to redux.

The following code from [5] depicts the container component using class component. [8] also offers a code example.

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

class CommentListContainer extends React.Component {
  constructor() {
    super()
    this.state = { comments: [] }
  }

  componentDidMount() {
    $.ajax({
      url: "/my-comments.json",
      dataType: 'json',
      success: comments =>
        this.setState({comments: comments});
    })
  }

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

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

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

Conditional rendering

[13] gives his opinions on the conditional rendering pattern and also states that it is a narutal 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 &&. [14] expands on the JSX alternatives for conditional rendering.

Compound Components

[15] and [16] 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, [15] mentions the HTML select and option as an example of compound components. [17] uses the compount component pattern to build a radio group component, which the user can select only one option between the avaialbe options.

Decorated component

The decorated component is a pattern that does not not appear often, [18] 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. [12] states that the decorated pattern is the same as HoC.

Higher-Order-Component

[13] and [12] agree on the definition that HoC, in a sense that HoC are decorators. [15] though, has an argument that the HoC name is misnormer, 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 [16] [8] [19] [20] [21] [22].

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

Therefore, [24] states that HoC is responsbile 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. [25] 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.

[26] explores the HoC in the new era of react hooks. [27] 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 [5] [16] [6] [19] [10], or as [28] states, instead of rendering the children (which is as common technique in reactjs), this pattern renders the prop. Eventhough [28] states that the render prop renders the prop, instead of the children, [26],[25] and [29] describes the render prop using the children explicitly.

Furthermore [13] 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 [30]. On the other hand [8], states that there are discution 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 [15]. The provider pattern is an aswer for the problem called props-drilling [32] [33].

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

[34] says that if the component needs to share more than two levels deep, the recommended approach is to use reactjs context. [35] 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[36][37]. [38] 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. [39] also states that hooks replace the mixins pattern for sharing code.

[26] depicts the difference between class components and functional components with hooks and th benefits of using it. [24] and [25] compares fetching data between the class approach and the functional approach with hooks, on the other hand [9] refactor the container pattern using the class style with hooks.

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

[42] and [43] focus on the state management. [42] 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, [44] 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 a implementation of FLUX, the state management pattern created by Facebook to handle global state [51][52]. [53] 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]M. Chan, “React Patterns on GitHub,” 2020 [Online]. Available at: https://reactpatterns.com. [Accessed: 11-Jul-2020]
  6. [6]G. Matheus, “React Component Patterns - Level Up Coding,” 2017 [Online]. Available at: https://levelup.gitconnected.com/react-component-patterns-ab1f09be2c82. [Accessed: 26-Oct-2017]
  7. [7]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]
  8. [8]L. Reis, “Simple React Patterns,” 2017 [Online]. Available at: https://lucasmreis.github.io/blog/simple-react-patterns. [Accessed: 08-Oct-2017]
  9. [9]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]
  10. [10]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]
  11. [11]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]
  12. [12]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]
  13. [13]A. Moldovan, “Evolving Patterns in React,” 2018 [Online]. Available at: https://www.freecodecamp.org/news/evolving-patterns-in-react-116140e5fe8f. [Accessed: 04-Feb-2018]
  14. [14]C. Rippon, “React Conditional Rendering Patterns | Building SPAs,” 2018 [Online]. Available at: https://www.carlrippon.com/react-conditional-rendering-patterns. [Accessed: 17-Apr-2018]
  15. [15]K. C. Dodds, “Advanced React Component Patterns,” 2017 [Online]. Available at: https://kentcdodds.com/blog/advanced-react-component-patterns. [Accessed: 05-Dec-2017]
  16. [16]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]
  17. [17]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]
  18. [18]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]
  19. [19]L. Maldonado, “Advanced Patterns in React,” 2019 [Online]. Available at: https://www.telerik.com/blogs/advanced-patterns-in-react. [Accessed: 09-Apr-2019]
  20. [20]Krasimir, “React.js in patterns,” 2016 [Online]. Available at: https://krasimirtsonev.com/blog/article/react-js-in-design-patterns. [Accessed: 20-Jul-2016]
  21. [21]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]
  22. [22]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]
  23. [23]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]
  24. [24]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]
  25. [25]A. Mansour, “5 React Data-Fetching Patterns - Nordschool,” 2019 [Online]. Available at: https://nordschool.com/react-data-fetching. [Accessed: 23-Oct-2019]
  26. [26]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]
  27. [27]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]
  28. [28]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]
  29. [29]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]
  30. [30]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]
  31. [31]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]
  32. [32]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]
  33. [33]A. Farmer, “8 no-Flux strategies for React component communication,” 2020 [Online]. Available at: https://www.javascriptstuff.com/component-communication/. [Accessed: 27-Sep-2020]
  34. [34]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]
  35. [35]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]
  36. [36]reactjs.org, “Introducing Hooks,” 2020 [Online]. Available at: https://reactjs.org/docs/hooks-intro.html. [Accessed: 26-Sep-2020]
  37. [37]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]
  38. [38]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]
  39. [39]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]
  40. [40]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]
  41. [41]A. Burdette, “Production-Level Patterns for React Hooks | FullStack Labs” [Online]. Available at: https://www.fullstacklabs.co/blog/production-level-patterns-for-react-hooks
  42. [42]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]
  43. [43]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]
  44. [44]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]
  45. [45]M. Pekala, “Discovering patterns with React hooks,” 2019 [Online]. Available at: https://ponyfoo.com/articles/discovering-patterns-with-react-hooks. [Accessed: 13-Apr-2019]
  46. [46]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]
  47. [47]A. Ray, “The ReactJS Controller View Pattern,” 2015 [Online]. Available at: http://blog.andrewray.me/the-reactjs-controller-view-pattern. [Accessed: 07-Jul-2015]
  48. [48]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]
  49. [49]K. Tsonev, “Dependency injection · React in patterns,” 2020 [Online]. Available at: https://krasimir.gitbooks.io/react-in-patterns/chapter-10. [Accessed: 27-Sep-2020]
  50. [50]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]
  51. [51]Facebook, “Flux - Application architecture for building user interfaces,” 2020 [Online]. Available at: https://facebook.github.io/flux. [Accessed: 27-Sep-2020]
  52. [52]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]
  53. [53]P. J. Frias, “Redux design patterns & Reduxsauce,” 2020 [Online]. Available at: https://blog.smartlogic.io/redux-design-patterns-reduxsauce. [Accessed: 27-Sep-2020]
  54. [54]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.

Title Abstract
React Patterns [5] provides a list with patterns used in reactjs, the list has a title and a brief description as well as the code snippet that represents the described pattern. The list works as a friendly guide for developers that need a way to quickly check how to compose a specific pattern.
Design Principles – React [55] is a collection of the ReactJs design principles that together composes the philosophy and key concepts implemented in ReactJs. Those are used as a guide fo ReactJs evolution and changes for the community around it.
2019 ReactJS Best Practices - Bogdan Kulbida - Medium [12] presents a best practices guide related to component creation, named: stateful components, stateless components, Higher order components and container components. For each pattern listed, the author goes in details for each one of them. The communication pattern between react components is also cited (known as data/props down, actions/events up).
Advanced React Component Patterns [15] describes the patterns used in his course, named: compound components, Higher order components, render props, prop collection and getters, state initializers, controlled components an provider. The list just gives a brief description of what is covered in the course and not much detail is given, which might be difficult to understand without a proper context, the author also assumes that the reader already has previous knowledge in React (as the title says it is an advanced reactjs patterns).
Five Ways to Advanced React Patterns - DEV [16] covers the same patterns as [15], not all of them though, and also adds the pattern state reducer.
How To Master Advanced React Design Patterns — Render Props [28] in covers exclusively the render props pattern, this post is part of a series of reactjs patterns that each post covers a single pattern.
Simple React Patterns | Lucas Reis’ Blog [8] gives code snippets for different reactjs patterns, named as “everyday patterns”, such as: container or view pattern (not to be confused by compound pattern), higher order component , render props and the provider pattern.
Advanced Patterns in React [19] dedicates the post to two specific reactjs patterns: higher order components and render props.
React.js in patterns [20] the author starts by the communication flow that reactjs uses as a foundation as well as the children props, basically setting up a common ground, then the pattern higher order component is introduced.
React Component Patterns - Level Up Coding [6] mentions for the first time in this list stateless and stateful components shows up, those patterns are often used to separate concerns between components. Besides that, the container, higher order component, render callback are presented. The author focus was to summarize his experience regarding those patterns.
Evolving Patterns in React [13] starts with patterns that are considered to be simple, such as conditional rendering, passing down props ([12] also mentions the passing props), in the follow up the author mentions the destructuring pattern, which is a javascript functionality and not a reactjs pattern.
React Conditional Rendering Patterns | Building SPAs [14] focus on the rendering patterns used in reactjs. Those patterns are directly connected to JSX, as reactjs uses JSX to render the component.
Patterns for Style Composition in React | Jxnblk [27] describes the patterns the he used to keep things organized, the goal as mentioned was to (but not limited to): create a well defined visual design, increase maintainability of visual styles and create reusable components. For that, the author used: stateless components (which is also discussed by [6]), styles module, style functions, npm modules, base component and higher order components. Those patterns listed, were used focused on the visual part.
Simple React Design Patterns: Container/View - serendipidata [7] expose his thoughts on the container/view pattern rather than explain how the pattern works. The author gives his opinions and use cases for the pattern, also the author assumes that the read has already some experience with reactjs and knows the vocabulary of the patterns, such as higher order components.
Higher-order Components: A React Application Design Pattern … [21] focus on the higher order components pattern, the author starts with the basic idea of pure functions as a base for the reader to understand the pattern.
Patterns for data fetching in React - LogRocket Blog [24] explore the different patterns to use when fetching data from a server using reactjs.
10 React mini-patterns | Hacker Noon [56] explore different approaches and use cases for using react, the pattern passing props down (this same pattern was explored by [12], [13]) is the only reactjs pattern that is mentioned by the author.
5 React Data-Fetching Patterns - Nordschool [25] is a shorter version of [24] and a more detailed one taking care of diving the fetching patterns with a reactjs pattern.
The Facade pattern and applying it to React Hooks [40] explores the idea of the facade pattern and the hooks pattern, mixing those together to abstract the third parties libraries to the application. The main idea of the author is to explore the facade with reactjs hooks.
React hooks design patterns and creating components without class [37] gives a brief explanation about the hooks, its functional approach and a comparison between class components and functional components. The author states that the reactjs patterns known by the class standard are shifting to hooks in a functional approach, and reactjs hooks is the future of react.
Common i18n patterns in React — LinguiJS documentation [29] is all about i18n in reactjs. Due the different ways to render a translation string, the examples given uses the component approach and the render prop.
Implementing the Container Pattern using React Hooks [9] implements the container pattern using hooks, a todo-app like is uses as an example for the usage of the container pattern. Besides that, the interesting part is that the author uses class components and functional components in the code examples.
Introduction to React Design Patterns [10] explores the container pattern and render props, also the flux pattern is introduced in the talk.
How advanced React patterns changed with hooks [26]
Four patterns for global state with React hooks: Context or Redux [34] shares his thoughts on global states in reactjs components, in the following order: prop passing, context and redux. Which for global state context and redux are popular solutions, therefore, passing props is a local state and not a global solution for that.
Zemuldo Blog - Patterns For Testable React Components [18] introduces a pattern named decorated components to make testing easier in react components. In fact, this is the first pattern mentioned with testing.
Discovering patterns with React hooks [45]
The ReactJS Controller View Pattern The controller view pattern introduced by [47] is used to delegates the responsibility of handling the state change to a single component.
Seven patterns by example: The many ways to type="radio" in React [17] focuses on the radios input type and based on the HTML input, the author starts to compose the reactjs patterns around it.
The React + Redux Container Pattern [11]
React Component Types: A complete Overview - RWieruch The complete guide of a reactjs component by [22] goes from the create react class style (the first approach of the library), using mixins as a way to share code between components, ES6 classes and higher order components. In the second part the the functional approach is introduced (as this is the latests and recommended way to write reactjs code). All in all, the complete guide shows the reactjs evolution through time and how new javascript features improved the library style of code and gave different approaches to solve common problems.
Production-Level Patterns for React Hooks | FullStack Labs [41] introduces the idea of effects instead of life cycle events (as reactjs used to be before hooks), in his approach the to-do app is used to re-factor the code from a class component to a functional component that uses hooks to share logic and separate concerns.
A Model View Controller Pattern for React - Test Double | Our Blog [57] uses the same idea as [41] to use MVC in reactjs. The difference here is that [57] goes in detail about why MVC.
Provider Pattern in React using React Context API [32] gives an introduction to the provider pattern. The author explains the concept of the provider pattern and why it exists (prop-drilling).
Using the Adapter Design Pattern With React | SendGrid The pattern adapter in reactjs presented by [48] introduces a pattern that aims to decouple the source data from the presentational layer. As the author states “Eventually, I decided that having the view so tightly coupled to the API was a poor decision.”, therefore, using the adapter pattern, offers the following benefits: reduced coupling, easier maintenance, the view layer focused on only the presentational aspect, updates to changes in the API becomes easier as there will be only one place to change.
Dependency injection · React in patterns [49] uses the dependency injection term to describe how reactjs pass props between components, in this sense, the dependency in a component is what in injected by the consumer.
AngularJS Patterns in React | Greg Babiars’s Blog [35] translates angular features, such as filters, directives, themes and slots, to its corresponding code in reactjs.
Global listener patterns in React - Advanced Web Machinery [50] provides patterns used in react to listen and remove listeners to global events. The first example uses the state to keep track of the listeners and also to remove them once the reacjs component has been unmounted, as pointed by the author, this approach requires three reactjs life cycle methods , otherwise it might produce undesirable behavior. An alternative to that is a simpler approach that relies on the window object to register and remove the listener.
Level up your React architecture with MVVM - COBE [54] introduces the MVVM pattern using reactjs, the pattern consists of separating the controller of updating the view with the responsible to control the update. This is the first time the MVVM appears in this list, which can open for further questions about the MVVM on reactjs.
React patterns | React and Ramda patterns [23] expoes code snippets to bring the functional approach to reacjs, ramda is a javascrpt functional library. The reactjs is focusing on functional approaches as well (hooks for example), but the approach is different, given the fact that reacjs wasn’t created with functional from scratch.
Friday Frontend: New React Patterns [46] is a collection shared by the author with different tips around the reactjs ecosystem, it doesn’t focus on any specific subject, but it refers links to patterns such as hooks and recursive reactjs components.
React’s State Reducer Pattern - DSC Engineering [31]
The Unstated React Service Pattern - HMH Engineering [58] describes the context pattern as an alternative to redux, mobx and apollo link state. The presented alternative is to use stated to manage the global state in reactjs.
Best Practices With React Hooks — Smashing Magazine [38] dives into the details of reactjs hooks, for a beginner point of view and also for an intermediate developer that already knows hooks but wants to level up the understanding of the subject (section “hooks best practices”).
15 React Best Practices You Need to Follow in 2020 [59] gathered 15 best practices that reactjs developers should follow, therefore, in those practices no specific pattern was mentioned.
React Patterns - Render Callback | Lenny’s Blog [30] presents the callback render as an alternative to render props, which has the same intent, the difference relies in the callback itself. Whereas the render props renders a given prop, the callback renders a function that is invoked before rendering.
Redux design patterns & Reduxsauce [53] is a source around the redux and reduxsauce and how the author used the flux pattern implementation.
React Hooks, the rebirth of State Management and beyond. [42] presents his experiments with reactjs hooks its usage with state management.
8 no-Flux strategies for React component communication [33] shows 8 different strategies to communicate data between reactjs. Even though the alternative claims to be an alternative to flux (the implementation most known is redux). Those alternatives are: props, instance methods, callback functions, event bubbling, parent component, observer pattern, global variables and context.
BLoC Pattern with React Hooks — magarcia [44] BLoC stands for Business Logic Component. The focus of BLoC is to remain environment and platform independent, use exclusively observables and also contains business logic. The pattern was created to support angular dart and and flutter, but the author suggests that it can be applicable to reactjs as well.
Getting to Know the Redux Pattern | DotNetCurry (missing reference) offers an approach to the redux pattern introducing the flux (which is the pattern definition - one way data flow) and also exposes a few examples in how to use it as a pure library (no reactjs). The content presented is a base to developers that want to understand how redux works and where it come from.
Clean Code vs. Dirty Code: React Best Practices - American … (missing reference) introduces the idea behind clean code and also its counter parts “dirty code”. The content is a set of best practices guide instead of a clear pattern implementation.
ReactJS - GeeksforGeeks [60] is a material created for beginners, it gives the foundation of reactjs, how it works, what it is, the naming and conventions. The material is recommended as a first approach to the reactjs ecosystem.
Reusable Code In React: Inheritance, Composition, Decorators and … [39] goes around the oriented object programming style for sharing code, such as inheritance, composition and decorators. Besides that the mixins pattern is taken as a “deprecated” way for sharing code in favor of hooks.
Killing Switch Statements in React with the Strategy Pattern [61] presents an alternative to switch statements, as mentioned by the author, the switch statement in this case was a smell and with maintainability issues.
A state management pattern for Ionic React with React Hooks [43] uses reactjs hooks to replicate the redux library behavior.
Advanced React Concepts | React Resources [62] is a collection of reactjs resources about advanced usage of reactjs.
Reactjs application development tips | Reactive [63]
Share this on