{"id":20833,"date":"2023-09-29T18:37:49","date_gmt":"2023-09-29T13:07:49","guid":{"rendered":"https:\/\/blogrevamp.cashfree.com\/?p=20833"},"modified":"2026-02-27T15:29:21","modified_gmt":"2026-02-27T09:59:21","slug":"crafting-robust-react-components-tips-and-best-practices","status":"publish","type":"post","link":"https:\/\/blogrevamp.cashfree.com\/crafting-robust-react-components-tips-and-best-practices\/","title":{"rendered":"Crafting Robust React Components: Tips and Best Practices"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #005c31;color:#005c31\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #005c31;color:#005c31\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/blogrevamp.cashfree.com\/crafting-robust-react-components-tips-and-best-practices\/#Introduction\" >Introduction<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/blogrevamp.cashfree.com\/crafting-robust-react-components-tips-and-best-practices\/#Break_the_UI_into_a_Component_Hierarchy\" >Break the UI into a Component Hierarchy<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/blogrevamp.cashfree.com\/crafting-robust-react-components-tips-and-best-practices\/#Build_a_Static_Version\" >Build a Static Version<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/blogrevamp.cashfree.com\/crafting-robust-react-components-tips-and-best-practices\/#Find_the_Minimal_but_Complete_Representation_of_UI_State\" >Find the Minimal but Complete Representation of UI State<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/blogrevamp.cashfree.com\/crafting-robust-react-components-tips-and-best-practices\/#Does_it_remain_unchanged_over_time\" >Does it remain unchanged over time?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/blogrevamp.cashfree.com\/crafting-robust-react-components-tips-and-best-practices\/#Is_it_passed_from_parent_via_props\" >Is it passed from parent via props?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/blogrevamp.cashfree.com\/crafting-robust-react-components-tips-and-best-practices\/#Can_we_compute_it_based_on_existing_state_or_props_or_Not_State\" >Can we compute it based on existing state or props? or Not State?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/blogrevamp.cashfree.com\/crafting-robust-react-components-tips-and-best-practices\/#Identify_Where_Your_State_Should_Live\" >Identify Where Your State Should Live<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/blogrevamp.cashfree.com\/crafting-robust-react-components-tips-and-best-practices\/#The_Search_and_Checkbox_Dilemma\" >The Search and Checkbox Dilemma<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/blogrevamp.cashfree.com\/crafting-robust-react-components-tips-and-best-practices\/#Filtering_the_Contact_List\" >Filtering the Contact List<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/blogrevamp.cashfree.com\/crafting-robust-react-components-tips-and-best-practices\/#The_Wisdom_of_a_Common_Parent\" >The Wisdom of a Common Parent<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/blogrevamp.cashfree.com\/crafting-robust-react-components-tips-and-best-practices\/#Add_Inverse_Data_Flow\" >Add Inverse Data Flow<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/blogrevamp.cashfree.com\/crafting-robust-react-components-tips-and-best-practices\/#Day_to_day_benefits\" >Day to day benefits<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/blogrevamp.cashfree.com\/crafting-robust-react-components-tips-and-best-practices\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Introduction\"><\/span>Introduction<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In modern web development, creating modular and scalable user interfaces is a crucial aspect of delivering a seamless user experience. If you&#8217;ve ever wondered how to break down those intricate UX designs into bite-sized, interactive components, then you&#8217;ve come to the right place!&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this post, we will explore how to break the UX design into React components while managing data with finesse. We&#8217;ll use a practical example of a contact list application to illustrate these concepts.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" width=\"770\" height=\"397\" data-attachment-id=\"20836\" data-permalink=\"https:\/\/blogrevamp.cashfree.com\/cdm_d_1\/\" data-orig-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D_1.png?fit=1841%2C950&amp;ssl=1\" data-orig-size=\"1841,950\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"CDM_D_1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D_1.png?fit=770%2C397&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D_1.png?resize=770%2C397&#038;ssl=1\" alt=\"\" class=\"wp-image-20836\" srcset=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D_1.png?resize=1024%2C528&amp;ssl=1 1024w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D_1.png?resize=300%2C155&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D_1.png?resize=768%2C396&amp;ssl=1 768w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D_1.png?resize=1536%2C793&amp;ssl=1 1536w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Break_the_UI_into_a_Component_Hierarchy\"><\/span>Break the UI into a Component Hierarchy<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To begin, the first step is to decompose the UI into a logical component hierarchy. This provides a structured and organised approach to building the application. In our example, we have the following components:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">a. <strong>&lt;FilterableContactList \/&gt;<\/strong>: The top-level component that handles filtering and displaying the contact list based on user input.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">b. <strong>&lt;SearchBar \/&gt;<\/strong>: A component responsible for allowing users to search for specific contacts.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">c. <strong>&lt;ContactList \/><\/strong>: This component displays the filtered list of contacts based on search criteria.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">d. <strong>&lt;Contact \/><\/strong>: Represents an individual contact item within the list.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now, let us breathe life into these components with the power of code!<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"770\" height=\"458\" data-attachment-id=\"20838\" data-permalink=\"https:\/\/blogrevamp.cashfree.com\/cdm_d2_v2_1\/\" data-orig-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D2_V2_1.png?fit=6941%2C4129&amp;ssl=1\" data-orig-size=\"6941,4129\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"CDM_D2_V2_1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D2_V2_1.png?fit=770%2C458&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D2_V2_1.png?resize=770%2C458&#038;ssl=1\" alt=\"\" class=\"wp-image-20838\" srcset=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D2_V2_1.png?resize=1024%2C609&amp;ssl=1 1024w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D2_V2_1.png?resize=300%2C178&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D2_V2_1.png?resize=768%2C457&amp;ssl=1 768w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D2_V2_1.png?resize=1536%2C914&amp;ssl=1 1536w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D2_V2_1.png?w=2310&amp;ssl=1 2310w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"770\" height=\"600\" data-attachment-id=\"20840\" data-permalink=\"https:\/\/blogrevamp.cashfree.com\/cdm_d3\/\" data-orig-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D3.png?fit=6941%2C5412&amp;ssl=1\" data-orig-size=\"6941,5412\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"CDM_D3\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D3.png?fit=770%2C600&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D3.png?resize=770%2C600&#038;ssl=1\" alt=\"\" class=\"wp-image-20840\" srcset=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D3.png?resize=1024%2C798&amp;ssl=1 1024w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D3.png?resize=300%2C234&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D3.png?resize=768%2C599&amp;ssl=1 768w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D3.png?resize=1536%2C1198&amp;ssl=1 1536w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D3.png?resize=87%2C67&amp;ssl=1 87w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D3.png?w=2310&amp;ssl=1 2310w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Build_a_Static_Version\"><\/span>Build a Static Version<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Think of it as a spellbook containing static data in JSON format, representing the contacts we&#8217;ll be working with. By doing this, we can get a crystal-clear picture of our app&#8217;s structure without the complexity of dynamic data.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"770\" height=\"252\" data-attachment-id=\"20842\" data-permalink=\"https:\/\/blogrevamp.cashfree.com\/cdm_d4_v2\/\" data-orig-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D4_V2.png?fit=6945%2C2274&amp;ssl=1\" data-orig-size=\"6945,2274\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"CDM_D4_V2\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D4_V2.png?fit=770%2C252&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D4_V2.png?resize=770%2C252&#038;ssl=1\" alt=\"\" class=\"wp-image-20842\" srcset=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D4_V2.png?resize=1024%2C335&amp;ssl=1 1024w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D4_V2.png?resize=300%2C98&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D4_V2.png?resize=768%2C251&amp;ssl=1 768w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D4_V2.png?resize=1536%2C503&amp;ssl=1 1536w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D4_V2.png?w=2310&amp;ssl=1 2310w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Find_the_Minimal_but_Complete_Representation_of_UI_State\"><\/span>Find the Minimal but Complete Representation of UI State<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Determining the appropriate state is crucial for React applications. We need to identify the minimal but complete representation of the UI state. In other words, what data should our components hold to create an interactive experience?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Does_it_remain_unchanged_over_time\"><\/span><strong>Does it remain unchanged over time?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In our case, the static contacts data itself is not expected to change over time. However, the UI state, such as the search query and favorite filter, can change.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Is_it_passed_from_parent_via_props\"><\/span><strong>Is it passed from parent via props?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Props are used to pass data from parent to child components. The search query and favorite filter will be passed from the &lt;FilterableContactList \/> component to its children.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Can_we_compute_it_based_on_existing_state_or_props_or_Not_State\"><\/span><strong>Can we compute it based on existing state or props? or Not State?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Some states can be derived from existing states or props rather than maintaining a separate state for them. For example, the filtered contact list can be computed based on the search query and favorite filter.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Identify_Where_Your_State_Should_Live\"><\/span>Identify Where Your State Should Live<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Based on the identified state, we need to decide where to store it in the component hierarchy. A misstep here could lead to chaos in our component hierarchy. In our example:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"The_Search_and_Checkbox_Dilemma\"><\/span><strong>The Search and Checkbox Dilemma<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To tackle the search query and favorite filter, we need dedicated states. These states should reside in the powerful &lt;FilterableContactList \/> component, ready to be distributed to the right warriors when needed.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"770\" height=\"440\" data-attachment-id=\"20844\" data-permalink=\"https:\/\/blogrevamp.cashfree.com\/cdm_d5\/\" data-orig-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D5.png?fit=6941%2C3963&amp;ssl=1\" data-orig-size=\"6941,3963\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"CDM_D5\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D5.png?fit=770%2C440&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D5.png?resize=770%2C440&#038;ssl=1\" alt=\"\" class=\"wp-image-20844\" srcset=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D5.png?resize=1024%2C585&amp;ssl=1 1024w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D5.png?resize=300%2C171&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D5.png?resize=768%2C438&amp;ssl=1 768w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D5.png?resize=1536%2C877&amp;ssl=1 1536w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D5.png?resize=900%2C515&amp;ssl=1 900w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D5.png?w=2310&amp;ssl=1 2310w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"770\" height=\"458\" data-attachment-id=\"20846\" data-permalink=\"https:\/\/blogrevamp.cashfree.com\/cdm_d6\/\" data-orig-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D6.png?fit=6941%2C4127&amp;ssl=1\" data-orig-size=\"6941,4127\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"CDM_D6\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D6.png?fit=770%2C458&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D6.png?resize=770%2C458&#038;ssl=1\" alt=\"\" class=\"wp-image-20846\" srcset=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D6.png?resize=1024%2C609&amp;ssl=1 1024w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D6.png?resize=300%2C178&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D6.png?resize=768%2C457&amp;ssl=1 768w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D6.png?resize=1536%2C913&amp;ssl=1 1536w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D6.png?w=2310&amp;ssl=1 2310w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Filtering_the_Contact_List\"><\/span><strong>Filtering the Contact List<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The art of filtering the contact list requires another piece of state, also to be stationed within the capable hands of <em>&lt;FilterableContactList \/&gt;<\/em>. This state will ensure seamless communication between components to wield the filtering magic effectively.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"The_Wisdom_of_a_Common_Parent\"><\/span><strong>The Wisdom of a Common Parent<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">We understand that states that affect children components should be lifted to a common parent. In this case, <em>&lt;FilterableContactList \/&gt;<\/em> is in charge of passing down the states to its children via props.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Our component hierarchy is ready to give an enchanting user experience, with our UI states put in the right places.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"770\" height=\"408\" data-attachment-id=\"20848\" data-permalink=\"https:\/\/blogrevamp.cashfree.com\/cdm_d7\/\" data-orig-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D7.png?fit=6941%2C3673&amp;ssl=1\" data-orig-size=\"6941,3673\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"CDM_D7\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D7.png?fit=770%2C408&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D7.png?resize=770%2C408&#038;ssl=1\" alt=\"\" class=\"wp-image-20848\" srcset=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D7.png?resize=1024%2C542&amp;ssl=1 1024w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D7.png?resize=300%2C159&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D7.png?resize=768%2C406&amp;ssl=1 768w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D7.png?resize=1536%2C813&amp;ssl=1 1536w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D7.png?w=2310&amp;ssl=1 2310w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Add_Inverse_Data_Flow\"><\/span>Add Inverse Data Flow<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In React, data flow typically follows a unidirectional pattern, meaning that data is passed from parent components to child components. This is often referred to as &#8220;props drilling.&#8221;\u00a0<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, in situations like these, we need to pass data or trigger actions in the opposite direction, from <em>&lt;SearchBar \/><\/em> to <em>&lt;FilterableContactList \/><\/em>. When the input value in the <em>&lt;SearchBar \/><\/em> changes, it calls this function (<em>onSearchChange<\/em>), allowing the parent to update its state based on the input. This is sometimes referred to as &#8220;inverse data flow&#8221; or &#8220;lifting state up.&#8221;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">a. <em>&lt;SearchBar \/><\/em> obtains the ability to relay the user&#8217;s search queries back to the parent by getting this callback (<em>onSearchChange<\/em> prop) from &lt;FilterableContactList \/><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"770\" height=\"455\" data-attachment-id=\"20850\" data-permalink=\"https:\/\/blogrevamp.cashfree.com\/cdm_d8\/\" data-orig-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D8.png?fit=6947%2C4102&amp;ssl=1\" data-orig-size=\"6947,4102\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"CDM_D8\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D8.png?fit=770%2C455&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D8.png?resize=770%2C455&#038;ssl=1\" alt=\"\" class=\"wp-image-20850\" srcset=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D8.png?resize=1024%2C605&amp;ssl=1 1024w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D8.png?resize=300%2C177&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D8.png?resize=768%2C453&amp;ssl=1 768w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D8.png?resize=1536%2C907&amp;ssl=1 1536w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_D8.png?w=2310&amp;ssl=1 2310w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Day_to_day_benefits\"><\/span>Day to day benefits<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The plan of action unveiled in this guide has given us tangible benefits. With the power of a well-structured component hierarchy, our development teams have experienced heightened efficiency and collaboration.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">At Cashfree Payments, using this approach in the initial stages gave us a blueprint of the ultimate product, allowing for more accurate design discussions and reducing design-to-development gaps. This strategic approach allows our teams to effortlessly coordinate their efforts, resulting in a more coherent and polished end product. The division of responsibilities among multiple components allows developers to work on distinct features with clear boundaries, reducing conflicts and streamlining the development process.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">By adopting a modular approach, you can achieve code reusability, maintainability, and a more organised development process. Focus on minimal state representation and proper state placement. Consider using inverse data flow when necessary. These best practices pave the way for a well-structured and high-performance React application, establishing the groundwork for future growth and enhancements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you find this interesting, get in touch with us for exciting opportunities for engineers like you!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Have a look at our active openings and\u00a0<a href=\"https:\/\/www.cashfree.com\/careers\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><mark>apply here<\/mark><\/strong><\/a>. If you don\u2019t find a suitable role, drop a mail to\u00a0<a href=\"mailto:careers@cashfree.com\" target=\"_blank\" rel=\"noreferrer noopener\">careers@cashfree.com<\/a><strong>.\u00a0<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Check how you can craft robust react components with cashfree payments&#8217; example and check tips and best practices.<\/p>\n","protected":false},"author":90,"featured_media":20852,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"_themeisle_gutenberg_block_has_review":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_wpcom_ai_launchpad_first_post":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1497],"tags":[],"class_list":["post-20833","post","type-post","status-publish","format-standard","has-post-thumbnail","category-engineering"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Crafting Robust React Components: Tips and Best Practices - Cashfree Blog<\/title>\n<meta name=\"description\" content=\"Check how you can craft robust react components with cashfree payments&#039; example and check tips and best practices.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.cashfree.com\/blog\/crafting-robust-react-components-tips-and-best-practices\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Crafting Robust React Components: Tips and Best Practices - Cashfree Blog\" \/>\n<meta property=\"og:description\" content=\"Check how you can craft robust react components with cashfree payments&#039; example and check tips and best practices.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cashfree.com\/blog\/crafting-robust-react-components-tips-and-best-practices\/\" \/>\n<meta property=\"og:site_name\" content=\"Cashfree Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-29T13:07:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-27T09:59:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_Tn_V5.jpg?fit=1208%2C803&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1208\" \/>\n\t<meta property=\"og:image:height\" content=\"803\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"kisley shirish\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"kisley shirish\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Crafting Robust React Components: Tips and Best Practices - Cashfree Blog","description":"Check how you can craft robust react components with cashfree payments' example and check tips and best practices.","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:\/\/www.cashfree.com\/blog\/crafting-robust-react-components-tips-and-best-practices\/","og_locale":"en_US","og_type":"article","og_title":"Crafting Robust React Components: Tips and Best Practices - Cashfree Blog","og_description":"Check how you can craft robust react components with cashfree payments' example and check tips and best practices.","og_url":"https:\/\/www.cashfree.com\/blog\/crafting-robust-react-components-tips-and-best-practices\/","og_site_name":"Cashfree Blog","article_published_time":"2023-09-29T13:07:49+00:00","article_modified_time":"2026-02-27T09:59:21+00:00","og_image":[{"width":1208,"height":803,"url":"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_Tn_V5.jpg?fit=1208%2C803&ssl=1","type":"image\/jpeg"}],"author":"kisley shirish","twitter_card":"summary_large_image","twitter_misc":{"Written by":"kisley shirish","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.cashfree.com\/blog\/crafting-robust-react-components-tips-and-best-practices\/#article","isPartOf":{"@id":"https:\/\/blogrevamp.cashfree.com\/crafting-robust-react-components-tips-and-best-practices\/"},"author":{"name":"kisley shirish","@id":"https:\/\/blogrevamp.cashfree.com\/#\/schema\/person\/5156b103c4db24ae44c330403871006f"},"headline":"Crafting Robust React Components: Tips and Best Practices","datePublished":"2023-09-29T13:07:49+00:00","dateModified":"2026-02-27T09:59:21+00:00","mainEntityOfPage":{"@id":"https:\/\/blogrevamp.cashfree.com\/crafting-robust-react-components-tips-and-best-practices\/"},"wordCount":909,"commentCount":0,"image":{"@id":"https:\/\/www.cashfree.com\/blog\/crafting-robust-react-components-tips-and-best-practices\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_Tn_V5.jpg?fit=1208%2C803&ssl=1","articleSection":["Engineering"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.cashfree.com\/blog\/crafting-robust-react-components-tips-and-best-practices\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/blogrevamp.cashfree.com\/crafting-robust-react-components-tips-and-best-practices\/","url":"https:\/\/www.cashfree.com\/blog\/crafting-robust-react-components-tips-and-best-practices\/","name":"Crafting Robust React Components: Tips and Best Practices - Cashfree Blog","isPartOf":{"@id":"https:\/\/blogrevamp.cashfree.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.cashfree.com\/blog\/crafting-robust-react-components-tips-and-best-practices\/#primaryimage"},"image":{"@id":"https:\/\/www.cashfree.com\/blog\/crafting-robust-react-components-tips-and-best-practices\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_Tn_V5.jpg?fit=1208%2C803&ssl=1","datePublished":"2023-09-29T13:07:49+00:00","dateModified":"2026-02-27T09:59:21+00:00","author":{"@id":"https:\/\/blogrevamp.cashfree.com\/#\/schema\/person\/5156b103c4db24ae44c330403871006f"},"description":"Check how you can craft robust react components with cashfree payments' example and check tips and best practices.","breadcrumb":{"@id":"https:\/\/www.cashfree.com\/blog\/crafting-robust-react-components-tips-and-best-practices\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.cashfree.com\/blog\/crafting-robust-react-components-tips-and-best-practices\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.cashfree.com\/blog\/crafting-robust-react-components-tips-and-best-practices\/#primaryimage","url":"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_Tn_V5.jpg?fit=1208%2C803&ssl=1","contentUrl":"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_Tn_V5.jpg?fit=1208%2C803&ssl=1","width":1208,"height":803},{"@type":"BreadcrumbList","@id":"https:\/\/www.cashfree.com\/blog\/crafting-robust-react-components-tips-and-best-practices\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blogrevamp.cashfree.com\/"},{"@type":"ListItem","position":2,"name":"Engineering","item":"https:\/\/blogrevamp.cashfree.com\/category\/engineering\/"},{"@type":"ListItem","position":3,"name":"Crafting Robust React Components: Tips and Best Practices"}]},{"@type":"WebSite","@id":"https:\/\/blogrevamp.cashfree.com\/#website","url":"https:\/\/blogrevamp.cashfree.com\/","name":"Cashfree Blog","description":"Cashfree - Payment Gateway for India","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogrevamp.cashfree.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blogrevamp.cashfree.com\/#\/schema\/person\/5156b103c4db24ae44c330403871006f","name":"kisley shirish","url":"https:\/\/blogrevamp.cashfree.com\/author\/kisleyshirish\/"}]}},"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9MjXo-5q1","jetpack_likes_enabled":false,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/09\/CDM_Tn_V5.jpg?fit=1208%2C803&ssl=1","_links":{"self":[{"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/posts\/20833","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/users\/90"}],"replies":[{"embeddable":true,"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/comments?post=20833"}],"version-history":[{"count":18,"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/posts\/20833\/revisions"}],"predecessor-version":[{"id":33031,"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/posts\/20833\/revisions\/33031"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/media\/20852"}],"wp:attachment":[{"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/media?parent=20833"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/categories?post=20833"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/tags?post=20833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}