{"id":3544,"date":"2022-05-09T13:26:09","date_gmt":"2022-05-09T13:26:09","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/7-tips-and-tricks-in-react\/"},"modified":"2026-03-05T12:50:54","modified_gmt":"2026-03-05T12:50:54","slug":"tipy-a-triky-pro-reakci","status":"publish","type":"post","link":"https:\/\/thecodest.co\/cs\/blog\/react-tips-and-tricks\/","title":{"rendered":"7 tip\u016f a trik\u016f v aplikaci React"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Use TypeScript<\/h2>\n\n\n\n<p>Whether we are talking just about <a href=\"https:\/\/thecodest.co\/cs\/blog\/react-development-all-you-have-to-know\/\">react<\/a> or other libraries, using <a href=\"https:\/\/thecodest.co\/cs\/dictionary\/typescript-developer\/\">Typescript<\/a> will help so much in the efforts to keep your <a href=\"https:\/\/thecodest.co\/cs\/dictionary\/what-is-code-refactoring\/\">code<\/a> organized. let\u2019s compare the following <a href=\"https:\/\/thecodest.co\/cs\/dictionary\/why-is-javascript-so-popular\/\">Javascript<\/a> vs Typescript dealing with props types.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"xml\" class=\"language-xml\">import PropTypes from 'prop-types'\n\nfunction UserCard({ user }) {\nreturn\n\n{user.firstname}, {user.lastname}\n\n}\n\nUserCard.propTypes = {\nuser: PropTypes.shape({\nfirstname: PropTypes.string.isRequired,\nlastname: PropTypes.string.isRequired\n...\n})\n}\n\nfunction UserList({ users }) {\nreturn\n\n{users.map((user) =&gt; )}\n\n}\n\nUserList.propTypes = {\nusers: PropTypes.arrayOf(PropTypes.shape({\nfirstname: PropTypes.string.isRequired,\nlastname: PropTypes.string.isRequired\n...\n}))\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">interface User {\nfirstname: String!\nlastname: String!\n...\n}\n\nfunction UserCard({ user }: { user: User }) {\nreturn\n\n{user.firstname}, {user.lastname}\n\n}\n\nfunction UserList({ users }: { users: User[] }) {\nreturn\n\n{users.map((user) =&gt; )}<\/code><\/pre>\n\n\n\n<p>Imagine having all your <a href=\"https:\/\/thecodest.co\/cs\/blog\/app-data-collection-security-risks-value-and-types-explored\/\">data<\/a> schemas as interfaces in a single place and reusing them in all the rest of your code. This will not only help you to avoid typing mistakes but also in case you want to change the schema, you should only change it in a single place.<\/p>\n\n\n\n<p>Besides that, many well-known javascript libraries are migrating to Typescript. eg: <a href=\"https:\/\/adonisjs.com\/\" rel=\"nofollow\">AdonisJS<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Separate Presentational &amp; Container Components<\/h2>\n\n\n\n<p>Separating Presentational &amp; Container Components makes our code easier to test and reason about.<\/p>\n\n\n\n<p><strong>Presentational components<\/strong> are concerned with&nbsp;<strong>how things look.<\/strong> It receives its <strong>data and behavior<\/strong> from parent components.<\/p>\n\n\n\n<p><strong>Container components<\/strong> are concerned with&nbsp;<strong>how things work.<\/strong> They provide the <strong>data and behavior<\/strong> to presentational or other container components.<\/p>\n\n\n\n<p>Using this approach allows <a href=\"https:\/\/thecodest.co\/cs\/blog\/why-us-companies-are-opting-for-polish-developers\/\">us<\/a> to reuse the same presentational components with different data and behavior. In addition to that, it makes our code cleaner and much easier to test.<\/p>\n\n\n\n<p>Check the following example with User Component which is used with different containers that provide different data and behavior.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"xml\" class=\"language-xml\">function BuyerContainer() {\nreturn \n}\n\nfunction SellerContainer() {\nreturn \n}\n\nfunction UserComponent({ name, onClick }) {\nreturn\n\n}<\/code><\/pre>\n\n\n\n<p>Use React Hooks and Functional Components Functional Components \u201creferred to as Stateless Components before\u201d are no anymore stateless. thanks to React Hooks, now you can useState hook to store state into a functional Component. or even use component lifecycle using useEffect. Functional components are easy to read and test. React Core got some other useful hooks that you can explore in Hooks Reference. The amazing thing is that you can also define your custom hooks. In the following example, we created a custom react hook called useDebounce. Which is used to limit autocomplete <a href=\"https:\/\/thecodest.co\/cs\/blog\/compare-staff-augmentation-firms-that-excel-in-api-team-staffing-for-financial-technology-projects\/\">API<\/a> calls when the input text changes.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">import { useEffect } from 'react';\nimport { debounce } from 'lodash';\nexport default function useDebounce( fn, delay = 500 ) {\nconst debounced = useMemoOne( () =&gt; debounce( fn, delay ), [\nfn,\ndelay,\n] );\nuseEffect( () =&gt; () =&gt; debounced.cancel(), [ debounced ] );\nreturn debounced;\n}\nexport default function SearchComponent()\nconst fetchAutoComplete = useDebounce((e) =&gt; {\n      \/\/ Fetch API (optional)\n}, 1000) \/\/ 1 sec\n\nreturn (\n\n{...}\n)\n}<\/code><\/pre>\n\n\n\n<p>Besides that, React hooks are a great replacement for Higher-Order Components (HoCs). Styled Component Styled Component is a library allowing the introduction of Dynamic CSS at the component level. while taking the advantage of ES. It makes your components more predictable and reusable. Forget about wasting too much time looking for the right class name for an element while trying to avoid using an existing one. With Styled Components ensure that your styles are scoped to the component and auto-generated class names at the build step. Besides that, it have never been easier to create dynamic CSS. your styles will be generated according props passed to the component. In the following example, the div style is both dependent on the outlined prop and the global theme.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">const Wrapper = styled.div`\n\n  border: ${props =&gt; props.outlined ? '1px solid' : 'none'};\n\n    background: ${props =&gt; props.theme.light ? 'black' : 'white'}<\/code><\/pre>\n\n\n\n<p>The last point about styled-components is that It improves the performance by not loading unnecessary styles of unused components. Slot Fill Library Let\u2019s you have defined a layout for your react app. then you want to add a widget in the sidebar only for a specific page. If you didn\u2019t consider that case from the beginning It can require a huge change to the layout. But using a library like \u2023 You can just define a Slot at the Sidebar. Then fill that slot with widgets only for particular pages. that way you will avoid passing flags all along the components tree to access the Sidebar. It has similar behavior to React Portals which is also a great solution for cases like Modals, Tooltips&#8230;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">import { Slot, Fill, Provider } from 'react-slot-fill';\nconst Sidebar = (props) =&gt;\n&nbsp;\nexport default Toolbar;\nSidebar.Item = (props) =&gt;\n\n{ props.label }\nconst Widget = () =&gt;\n[\n\n];\nconst Page = ({children}) =&gt;\n\n{children}\n\nconst HomePage = () =&gt;\n\na Page without Widjet\nconst DashboardPage = () =&gt;\n\na Page with Widjet<\/code><\/pre>\n\n\n\n<p>Higher-Order Components Even if React hooks replace HOCs in most cases. HoCs are still a great choice concerning hiding complexity from components like providing multiple props to Page Components or conditional rendering (Private routes, loading status &#8230;) The following example illustrates how can we encapsulate the complexity of both Private routes and Page common props into reusable HoCs applied to all application pages. Keep in mind that most HoCs cases can be replaced by React Hooks. and that we can by mistake override props by composed HoCs. So please use HoCs only when necessary to keep page components cleaner. otherwise use React Hooks.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">function withPrivateRoute(Component) {\n...\nreturn function PrivateRoute(props) {\nif (!userConnected) return ;\nreturn ;\n};\n}\nfunction withPageProps(Component) {\n...\nreturn function privateRoute(props) {\nreturn ;\n};\n}\nfunction ProfilePage({ navigation, currentPath, currentUser}) {\nreturn\nProfile Page\n}\nexport default withPrivateRoute(withPageProps(ProfilePage))<\/code><\/pre>\n\n\n\n<p>Error Boundaries Error boundaries are class components, which catch all errors\/exceptions thrown at children&#8217;s level. When declared at the top level it will allow you to do proper error handling by showing an error message and logging the error at a platform monitoring tool like Sentry. This way you\u2019ll be the first how catch errors and try fixing them before it impacts the user experience. Note: ErrorBoundaries should be declared at class they do not support functional components.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">class ErrorBoundary extends React.Component {\nconstructor(props) {\nsuper(props);\nthis.state = { hasError: false };\n}\nstatic getDerivedStateFromError(error) {\nreturn { hasError: true };\n}\ncomponentDidCatch(error, errorInfo) {\nlogErrorToMySentry(error, errorInfo);\n}\nrender() {\nif (this.state.hasError) {\nreturn\nSomething went wrong ! Contact Admin\n;\n}\nreturn this.props.children;\n\n}\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Hled\u00e1te zp\u016fsoby, jak zlep\u0161it sv\u016fj k\u00f3d React? Tento \u010dl\u00e1nek obsahuje tipy a triky, kter\u00e9 by m\u011bl zn\u00e1t ka\u017ed\u00fd v\u00fdvoj\u00e1\u0159 React. Poj\u010fme se do toho pono\u0159it!<\/p>","protected":false},"author":2,"featured_media":3545,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-3544","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-development"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>7 Tips and Tricks in React - The Codest<\/title>\n<meta name=\"description\" content=\"Looking for ways to improve your React code? This article contains tips and tricks that every React Developer should know. Let&#039;s dive in!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thecodest.co\/cs\/blog\/tipy-a-triky-pro-reakci\/\" \/>\n<meta property=\"og:locale\" content=\"cs_CZ\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"7 Tips and Tricks in React\" \/>\n<meta property=\"og:description\" content=\"Looking for ways to improve your React code? This article contains tips and tricks that every React Developer should know. Let&#039;s dive in!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thecodest.co\/cs\/blog\/tipy-a-triky-pro-reakci\/\" \/>\n<meta property=\"og:site_name\" content=\"The Codest\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-09T13:26:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-05T12:50:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/react__tips_and_tricks.png\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"thecodest\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"thecodest\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/react-tips-and-tricks\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/react-tips-and-tricks\\\/\"},\"author\":{\"name\":\"thecodest\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\"},\"headline\":\"7 Tips and Tricks in React\",\"datePublished\":\"2022-05-09T13:26:09+00:00\",\"dateModified\":\"2026-03-05T12:50:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/react-tips-and-tricks\\\/\"},\"wordCount\":747,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/react-tips-and-tricks\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/react__tips_and_tricks.png\",\"articleSection\":[\"Software Development\"],\"inLanguage\":\"cs-CZ\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/react-tips-and-tricks\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/react-tips-and-tricks\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/react-tips-and-tricks\\\/\",\"name\":\"7 Tips and Tricks in React - The Codest\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/react-tips-and-tricks\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/react-tips-and-tricks\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/react__tips_and_tricks.png\",\"datePublished\":\"2022-05-09T13:26:09+00:00\",\"dateModified\":\"2026-03-05T12:50:54+00:00\",\"description\":\"Looking for ways to improve your React code? This article contains tips and tricks that every React Developer should know. Let's dive in!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/react-tips-and-tricks\\\/#breadcrumb\"},\"inLanguage\":\"cs-CZ\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/react-tips-and-tricks\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"cs-CZ\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/react-tips-and-tricks\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/react__tips_and_tricks.png\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/react__tips_and_tricks.png\",\"width\":960,\"height\":540},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/react-tips-and-tricks\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thecodest.co\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"7 Tips and Tricks in React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"name\":\"The Codest\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thecodest.co\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"cs-CZ\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"cs-CZ\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"width\":144,\"height\":36,\"caption\":\"The Codest\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/pl.linkedin.com\\\/company\\\/codest\",\"https:\\\/\\\/clutch.co\\\/profile\\\/codest\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\",\"name\":\"thecodest\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"cs-CZ\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"caption\":\"thecodest\"},\"url\":\"https:\\\/\\\/thecodest.co\\\/cs\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"7 tip\u016f a trik\u016f v aplikaci React - The Codest","description":"Hled\u00e1te zp\u016fsoby, jak zlep\u0161it sv\u016fj k\u00f3d React? Tento \u010dl\u00e1nek obsahuje tipy a triky, kter\u00e9 by m\u011bl zn\u00e1t ka\u017ed\u00fd v\u00fdvoj\u00e1\u0159 React. Poj\u010fme se do toho pono\u0159it!","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:\/\/thecodest.co\/cs\/blog\/tipy-a-triky-pro-reakci\/","og_locale":"cs_CZ","og_type":"article","og_title":"7 Tips and Tricks in React","og_description":"Looking for ways to improve your React code? This article contains tips and tricks that every React Developer should know. Let's dive in!","og_url":"https:\/\/thecodest.co\/cs\/blog\/tipy-a-triky-pro-reakci\/","og_site_name":"The Codest","article_published_time":"2022-05-09T13:26:09+00:00","article_modified_time":"2026-03-05T12:50:54+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/react__tips_and_tricks.png","type":"image\/png"}],"author":"thecodest","twitter_card":"summary_large_image","twitter_misc":{"Written by":"thecodest","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thecodest.co\/blog\/react-tips-and-tricks\/#article","isPartOf":{"@id":"https:\/\/thecodest.co\/blog\/react-tips-and-tricks\/"},"author":{"name":"thecodest","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76"},"headline":"7 Tips and Tricks in React","datePublished":"2022-05-09T13:26:09+00:00","dateModified":"2026-03-05T12:50:54+00:00","mainEntityOfPage":{"@id":"https:\/\/thecodest.co\/blog\/react-tips-and-tricks\/"},"wordCount":747,"commentCount":0,"publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"image":{"@id":"https:\/\/thecodest.co\/blog\/react-tips-and-tricks\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/react__tips_and_tricks.png","articleSection":["Software Development"],"inLanguage":"cs-CZ","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/thecodest.co\/blog\/react-tips-and-tricks\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/thecodest.co\/blog\/react-tips-and-tricks\/","url":"https:\/\/thecodest.co\/blog\/react-tips-and-tricks\/","name":"7 tip\u016f a trik\u016f v aplikaci React - The Codest","isPartOf":{"@id":"https:\/\/thecodest.co\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thecodest.co\/blog\/react-tips-and-tricks\/#primaryimage"},"image":{"@id":"https:\/\/thecodest.co\/blog\/react-tips-and-tricks\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/react__tips_and_tricks.png","datePublished":"2022-05-09T13:26:09+00:00","dateModified":"2026-03-05T12:50:54+00:00","description":"Hled\u00e1te zp\u016fsoby, jak zlep\u0161it sv\u016fj k\u00f3d React? Tento \u010dl\u00e1nek obsahuje tipy a triky, kter\u00e9 by m\u011bl zn\u00e1t ka\u017ed\u00fd v\u00fdvoj\u00e1\u0159 React. Poj\u010fme se do toho pono\u0159it!","breadcrumb":{"@id":"https:\/\/thecodest.co\/blog\/react-tips-and-tricks\/#breadcrumb"},"inLanguage":"cs-CZ","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thecodest.co\/blog\/react-tips-and-tricks\/"]}]},{"@type":"ImageObject","inLanguage":"cs-CZ","@id":"https:\/\/thecodest.co\/blog\/react-tips-and-tricks\/#primaryimage","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/react__tips_and_tricks.png","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/react__tips_and_tricks.png","width":960,"height":540},{"@type":"BreadcrumbList","@id":"https:\/\/thecodest.co\/blog\/react-tips-and-tricks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thecodest.co\/"},{"@type":"ListItem","position":2,"name":"7 Tips and Tricks in React"}]},{"@type":"WebSite","@id":"https:\/\/thecodest.co\/#website","url":"https:\/\/thecodest.co\/","name":"The Codest","description":"","publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thecodest.co\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"cs-CZ"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"The Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"cs-CZ","@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","width":144,"height":36,"caption":"The Codest"},"image":{"@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/pl.linkedin.com\/company\/codest","https:\/\/clutch.co\/profile\/codest"]},{"@type":"Person","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76","name":"thecodest","image":{"@type":"ImageObject","inLanguage":"cs-CZ","@id":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","caption":"thecodest"},"url":"https:\/\/thecodest.co\/cs\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/posts\/3544","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/comments?post=3544"}],"version-history":[{"count":10,"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/posts\/3544\/revisions"}],"predecessor-version":[{"id":8534,"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/posts\/3544\/revisions\/8534"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/media\/3545"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/media?parent=3544"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/categories?post=3544"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/cs\/wp-json\/wp\/v2\/tags?post=3544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}