{"id":5713,"date":"2022-03-21T04:52:17","date_gmt":"2022-03-21T04:52:17","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=5713"},"modified":"2022-03-21T05:47:34","modified_gmt":"2022-03-21T05:47:34","slug":"uni-directional-or-one-way-data-flow-in-react-js","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/uni-directional-or-one-way-data-flow-in-react-js\/","title":{"rendered":"Uni-directional or one-way data flow in React JS"},"content":{"rendered":"

What is the uni-directional data flow?<\/h2>\n

In React, the state is used to store the data related to the components and pass that state as pros(data coming from parents is being called props) to the child components
\nPhenomena of passing data from parent to child component are called the uni-directional or one-way data flow.<\/p>\n

The uni-directional data flow has some advantages, these are<\/em><\/strong><\/p>\n

    \n
  1. Easier debugging<\/a><\/li>\n
  2. Less prone to errors<\/li>\n
  3. it\u2019s more efficient because the library already knows what the boundaries are of each part of the system<\/li>\n<\/ol>\n

    Changing the state of a component will never affect its parent or the siblings, only the children will be affected. This is the main reason that the state is often moved up in the component tree so that it can be shared between the components that need to access it.<\/p>\n

    But there are certain situations where we need to pass the data from the child to the parent component:<\/strong>
    \nIn that case, we can store the state in the nearest Parent component and then pass the data as props to the child components and Parent component can make the necessary state change and the new state gets passed to its child components.<\/p>\n

    Get certification for your knowledge in the fundamentals of Computer functioning by clearing the Computer Certification exam conducted by StudySection. After going through this Computer Certification Exam<\/a>, you will be able to evaluate your basic knowledge of computers.<\/em><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

    What is the uni-directional data flow? In React, the state is used to store the data related to the components<\/p>\n","protected":false},"author":1,"featured_media":5714,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[262,771],"acf":[],"yoast_head":"\nUni-directional or one-way data flow in React JS - SS Blog<\/title>\n<meta name=\"description\" content=\"Phenomena of passing data from parent to child component are called the uni-directional or one-way data flow.\" \/>\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\/uni-directional-or-one-way-data-flow-in-react-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Uni-directional or one-way data flow in React JS - SS Blog\" \/>\n<meta property=\"og:description\" content=\"Phenomena of passing data from parent to child component are called the uni-directional or one-way data flow.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/uni-directional-or-one-way-data-flow-in-react-js\/\" \/>\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=\"2022-03-21T04:52:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-21T05:47:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2022\/03\/React-JS.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\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/uni-directional-or-one-way-data-flow-in-react-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/uni-directional-or-one-way-data-flow-in-react-js\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"Uni-directional or one-way data flow in React JS\",\"datePublished\":\"2022-03-21T04:52:17+00:00\",\"dateModified\":\"2022-03-21T05:47:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/uni-directional-or-one-way-data-flow-in-react-js\/\"},\"wordCount\":247,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"development\",\"React JS\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/uni-directional-or-one-way-data-flow-in-react-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/uni-directional-or-one-way-data-flow-in-react-js\/\",\"url\":\"https:\/\/studysection.com\/blog\/uni-directional-or-one-way-data-flow-in-react-js\/\",\"name\":\"Uni-directional or one-way data flow in React JS - SS Blog\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2022-03-21T04:52:17+00:00\",\"dateModified\":\"2022-03-21T05:47:34+00:00\",\"description\":\"Phenomena of passing data from parent to child component are called the uni-directional or one-way data flow.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/uni-directional-or-one-way-data-flow-in-react-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/uni-directional-or-one-way-data-flow-in-react-js\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/uni-directional-or-one-way-data-flow-in-react-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Uni-directional or one-way data flow in React JS\"}]},{\"@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":"Uni-directional or one-way data flow in React JS - SS Blog","description":"Phenomena of passing data from parent to child component are called the uni-directional or one-way data flow.","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\/uni-directional-or-one-way-data-flow-in-react-js\/","og_locale":"en_US","og_type":"article","og_title":"Uni-directional or one-way data flow in React JS - SS Blog","og_description":"Phenomena of passing data from parent to child component are called the uni-directional or one-way data flow.","og_url":"https:\/\/studysection.com\/blog\/uni-directional-or-one-way-data-flow-in-react-js\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2022-03-21T04:52:17+00:00","article_modified_time":"2022-03-21T05:47:34+00:00","og_image":[{"width":300,"height":200,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2022\/03\/React-JS.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","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/uni-directional-or-one-way-data-flow-in-react-js\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/uni-directional-or-one-way-data-flow-in-react-js\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"Uni-directional or one-way data flow in React JS","datePublished":"2022-03-21T04:52:17+00:00","dateModified":"2022-03-21T05:47:34+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/uni-directional-or-one-way-data-flow-in-react-js\/"},"wordCount":247,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["development","React JS"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/uni-directional-or-one-way-data-flow-in-react-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/uni-directional-or-one-way-data-flow-in-react-js\/","url":"https:\/\/studysection.com\/blog\/uni-directional-or-one-way-data-flow-in-react-js\/","name":"Uni-directional or one-way data flow in React JS - SS Blog","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2022-03-21T04:52:17+00:00","dateModified":"2022-03-21T05:47:34+00:00","description":"Phenomena of passing data from parent to child component are called the uni-directional or one-way data flow.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/uni-directional-or-one-way-data-flow-in-react-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/uni-directional-or-one-way-data-flow-in-react-js\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/uni-directional-or-one-way-data-flow-in-react-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Uni-directional or one-way data flow in React JS"}]},{"@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":293,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/5713"}],"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=5713"}],"version-history":[{"count":2,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/5713\/revisions"}],"predecessor-version":[{"id":5716,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/5713\/revisions\/5716"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/5714"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=5713"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=5713"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=5713"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}