{"id":7185,"date":"2023-11-23T07:17:45","date_gmt":"2023-11-23T07:17:45","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=7185"},"modified":"2023-11-23T07:17:45","modified_gmt":"2023-11-23T07:17:45","slug":"observer-pattern-in-react-reactjs-2","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/observer-pattern-in-react-reactjs-2\/","title":{"rendered":"Observer Pattern in React\/ReactJS"},"content":{"rendered":"

In software design, the observer pattern establishes a one-to-many relationship between components. There are two main entities: the “subject”<\/em><\/strong> and the “observer.”<\/em><\/strong> The subject is linked with one or more observers, and when the subject’s state changes, all connected observers are notified and updated accordingly.<\/p>\n

\"observer<\/p>\n

In React\/ReactJS, when a component’s state changes, the component is re-rendered. This state change is passed down to child components as props, leading to their re-rendering when props change.<\/p>\n

\"observer<\/p>\n

Consider a scenario where a parent component (A) needs to change the state of a specific child component (D). Traditional React behavior would cause all descendants holding that state to re-render, which might not be optimal for performance. In this case, Redux becomes handy.
\nIn Redux, there’s a centralized store that is used to manage the application\u2019s state. In this store, all the states are stored and any component can have access to that state. So, the only desired UI or component re-render, rather than of whole descendants.<\/p>\n

It’s important to note that the observer pattern is a general design pattern applicable in various contexts and is not specific to React or Redux. The pattern minimizes coupling between objects, enabling efficient sharing of essential data.<\/p>\n

This pattern addresses the one-to-many dependency by reducing coupling between objects i.e. means sharing less amount of data or only essential details.<\/p>\n

Below is an example showing how the Observer Pattern can be implemented in ReactJS:<\/em>
\nimport React, { useState, useEffect } from 'react';
\n\/\/ Define a Subject (observable) responsible for managing state
\nconst CounterSubject = () => {
\n const [count, setCount] = useState(0);
\n const increment = () => {
\n setCount(count + 1);
\n };
\n return { count, increment };
\n}
\n\/\/ Define an Observer (component) that observes changes in state
\nconst CounterObserver = ({ counterSubject }) => {
\n const { count, increment } = counterSubject;
\n useEffect(() => {
\n console.log(`Count has changed to: ${count}`);
\n }, [count]);
\n return (
\n <div>
\n <p>Count: {count}<\/p>
\n <button onClick={increment}>Increment<\/button>
\n <\/div>
\n );
\n};
\n\/\/ Create a single instance of the CounterSubject
\nconst counterSubject = CounterSubject();
\n\/\/ Create multiple instances of the CounterObserver
\nfunction Pattern() {
\n return (
\n <div>
\n <CounterObserver counterSubject={counterSubject} \/>
\n <CounterObserver counterSubject={counterSubject} \/>
\n <\/div>
\n );
\n}
\nexport default Pattern;<\/code><\/p>\n

The Output of this, above code is:<\/h3>\n

Count has changed to: 1
\nCount has changed to: 2
\nCount has changed to: 3<\/em><\/p>\n

In this example, the CounterSubject manages the state, while CounterObserver components observe and respond to state changes. Each CounterObserver instance only updates when the specific state it observes changes, showcasing the observer pattern’s efficiency in React applications.<\/p>\n

People having good knowledge of Financial accounting can get an Accounting Certification<\/a> from StudySection to increase their chances of getting a job in this field. You can get a foundation level certification if you are new to Financial accounting or you can go for advanced level certification if you have expert level skills in Financial accounting.<\/em><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

In software design, the observer pattern establishes a one-to-many relationship between components. There are two main entities: the “subject” and<\/p>\n","protected":false},"author":1,"featured_media":7186,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[897,641],"acf":[],"yoast_head":"\nObserver Pattern in React\/ReactJS - StudySection Blog<\/title>\n<meta name=\"description\" content=\"In software design, the observer pattern establishes a one-to-many relationship between components. There are two main entities.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/observer-pattern-in-react-reactjs-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Observer Pattern in React\/ReactJS - StudySection Blog\" \/>\n<meta property=\"og:description\" content=\"In software design, the observer pattern establishes a one-to-many relationship between components. There are two main entities.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/observer-pattern-in-react-reactjs-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-23T07:17:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2023\/11\/React_ReactJS1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/observer-pattern-in-react-reactjs-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/observer-pattern-in-react-reactjs-2\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"Observer Pattern in React\/ReactJS\",\"datePublished\":\"2023-11-23T07:17:45+00:00\",\"dateModified\":\"2023-11-23T07:17:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/observer-pattern-in-react-reactjs-2\/\"},\"wordCount\":355,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"Observer Pattern\",\"Reactjs\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/observer-pattern-in-react-reactjs-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/observer-pattern-in-react-reactjs-2\/\",\"url\":\"https:\/\/studysection.com\/blog\/observer-pattern-in-react-reactjs-2\/\",\"name\":\"Observer Pattern in React\/ReactJS - StudySection Blog\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2023-11-23T07:17:45+00:00\",\"dateModified\":\"2023-11-23T07:17:45+00:00\",\"description\":\"In software design, the observer pattern establishes a one-to-many relationship between components. There are two main entities.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/observer-pattern-in-react-reactjs-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/observer-pattern-in-react-reactjs-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/observer-pattern-in-react-reactjs-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Observer Pattern in React\/ReactJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Observer Pattern in React\/ReactJS - StudySection Blog","description":"In software design, the observer pattern establishes a one-to-many relationship between components. There are two main entities.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/studysection.com\/blog\/observer-pattern-in-react-reactjs-2\/","og_locale":"en_US","og_type":"article","og_title":"Observer Pattern in React\/ReactJS - StudySection Blog","og_description":"In software design, the observer pattern establishes a one-to-many relationship between components. There are two main entities.","og_url":"https:\/\/studysection.com\/blog\/observer-pattern-in-react-reactjs-2\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2023-11-23T07:17:45+00:00","og_image":[{"width":300,"height":200,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2023\/11\/React_ReactJS1.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/observer-pattern-in-react-reactjs-2\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/observer-pattern-in-react-reactjs-2\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"Observer Pattern in React\/ReactJS","datePublished":"2023-11-23T07:17:45+00:00","dateModified":"2023-11-23T07:17:45+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/observer-pattern-in-react-reactjs-2\/"},"wordCount":355,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["Observer Pattern","Reactjs"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/observer-pattern-in-react-reactjs-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/observer-pattern-in-react-reactjs-2\/","url":"https:\/\/studysection.com\/blog\/observer-pattern-in-react-reactjs-2\/","name":"Observer Pattern in React\/ReactJS - StudySection Blog","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2023-11-23T07:17:45+00:00","dateModified":"2023-11-23T07:17:45+00:00","description":"In software design, the observer pattern establishes a one-to-many relationship between components. There are two main entities.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/observer-pattern-in-react-reactjs-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/observer-pattern-in-react-reactjs-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/observer-pattern-in-react-reactjs-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Observer Pattern in React\/ReactJS"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":316,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/7185"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=7185"}],"version-history":[{"count":2,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/7185\/revisions"}],"predecessor-version":[{"id":7190,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/7185\/revisions\/7190"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/7186"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=7185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=7185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=7185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}