{"id":283,"date":"2020-03-01T15:32:00","date_gmt":"2020-03-01T15:32:00","guid":{"rendered":"http:\/\/agilno.local\/?p=128"},"modified":"2022-09-27T09:42:30","modified_gmt":"2022-09-27T07:42:30","slug":"should-you-start-optimizing-every-part-of-your-react-app","status":"publish","type":"post","link":"https:\/\/makeit.com.hr\/agilno\/blog\/should-you-start-optimizing-every-part-of-your-react-app\/","title":{"rendered":"Should you start optimizing every part of your React app?"},"content":{"rendered":"\r\n

When we talk about app optimizations and performance it\u2019s important to note it comes with a cost. Recently I\u2019ve been working on a project where the useMemo or useCallback hooks were overused and I\u2019ll try to explain why this is not the best practice.<\/p>\r\n\r\n\r\n\r\n

While working with React you will encounter terms like PureComponent, memo, useMemo and useCallback.<\/p>\r\n\r\n\r\n\r\n

What they have in common is prevention of unnecessary rerendering of a component.<\/p>\r\n\r\n\r\n\r\n

What is PureComponent?<\/strong><\/h2>\r\n\r\n\r\n\r\n

PureComponent is the Component which handles shouldComponentUpdate lifecycle method by itself. PureComponent does a shallow comparison on both props and state of the component on every change and decides whether to re-render it or not.<\/p>\r\n\r\n\r\n\r\n

One thing you should keep in mind – never mutate the object because if you mutate an object in the parent component your pure child component won\u2019t update.<\/p>\r\n\r\n\r\n\r\n

\/\/Bad\r\n<SomeItem = {() => this.calucateSomething(id)} \/><\/pre>\r\n\r\n\r\n\r\n
Another thing you should avoid is binding functions in a render. We should pass only the reference to SomeItem, because every time render triggers, a new function with the new reference is created.<\/p>\r\n\r\n\r\n\r\n
\/\/Good\r\n<SomeItem = {this.calucateSomething} \/><\/pre>\r\n\r\n\r\n\r\n
If your child component renders the same props\/state you can use PureComponent and its usage is straightforward.<\/p>\r\n\r\n\r\n\r\n
class Player extends React.PureComponent {\r\n  \/\/.....\r\n}<\/pre>\r\n\r\n\r\n\r\n
What is React.memo<\/strong><\/h2>\r\n\r\n\r\n\r\n
React memo is a higher order component that is similar to PureComponent but only for functional components.<\/p>\r\n\r\n\r\n\r\n
If your component renders the same result given the same props then it will not re-render. If the component also has useState or useContext hooks, it will still re-render on state\/context changes. As you can see from the example below every time we click a button to increase a count a Player components re-renders. We know that our Player component doesn\u2019t depend on count state so we can use a React.memo to prevent renders. You want to use React.memo when the component depends only on props.<\/p>\r\n\r\n\r\n\r\n
\r\n
The more often the component renders with the same props, the heavier and the more computationally expensive the output is, the more chances are that component needs to be wrapped in React.memo()<\/p>\r\n<\/blockquote>\r\n\r\n\r\n\r\n
import React from \"react\";\r\nimport Player from \".\/Player\";\r\n\u200b\r\nclass MemoPerfomance extends React.Component {\r\n  state = {\r\n    count: 0,\r\n    player: { name: \"Player\", surname: \"Number 2\" }\r\n  };\r\n  setCounterHandler = () => {\r\n    const { count } = this.state;\r\n    this.setState({ count: count + 1 });\r\n  };\r\n\u200b\r\n  render() {\r\n    const { count, player } = this.state;\r\n    return (\r\n      <div className=\"App\">\r\n        <h1>Hello memo<\/h1>\r\n        <button onClick={this.setCounterHandler}>Counter<\/button>\r\n        <h2>{count}<\/h2>\r\n        <Player player={player} \/>\r\n      <\/div>\r\n    );\r\n  }\r\n}\r\nexport default MemoPerfomance;\r\n\u200b\r\nimport React from \"react\";\r\nconst Player = ({ player}) => {\r\n  console.log(\"RENDER\")\r\n  return (\r\n    <div>\r\n      <p>\r\n        {player.name} {player.surname}\r\n      <\/p>\r\n      <p>I\u2019m player<\/p>\r\n    <\/div>\r\n  );\r\n};\r\n\u200b\r\nexport default React.memo(Player);<\/pre>\r\n\r\n\r\n\r\n
In terms of performance we should do it like this because we are always pointing to the same object in memory:<\/p>\r\n\r\n\r\n\r\n
<Player player={player}  \/><\/pre>\r\n\r\n\r\n\r\n
If you pass props this way the new object will be created on every single render. That means even though we memoized our Player component, it is still going to re-render just because a new object is created:<\/p>\r\n\r\n\r\n\r\n
<Player player={{name:\"Player\" surname:\"Number 2\"}}  \/><\/pre>\r\n\r\n\r\n\r\n
\"\"<\/figure>\r\n\r\n\r\n\r\n
useCallback and useMemo<\/strong><\/h2>\r\n\r\n\r\n\r\n
useCallback wraps a function and memoizes it, so if none of the dependencies change we will get back a cached or memoized version of the function.<\/p>\r\n\r\n\r\n\r\n
useCallback returns a memoized callback. It takes two arguments, a callback and an array of dependencies. The second argument is mandatory with the useCallback hook. If we don\u2019t have dependencies the second argument should just be an empty array. If that is not the case, you need to pass every dependency to the array because you will get an error in the console even though it might still work (it will not render when a missed dependency changes).<\/p>\r\n\r\n\r\n\r\n
useMemo is very similar to the useCallback hook. The only difference is that you actually use it when you want to cache the value of a function that does something computationally expensive.<\/p>\r\n\r\n\r\n\r\n
import React, { useState, useCallback, useMemo } from \"react\";\r\n\u200b\r\nconst CountStats = React.memo(({ onClick, count }) => {\r\n  console.log(\"RENDER\");\r\n  return <button onClick={onClick}>{count}<\/button>;\r\n});\r\n\u200b\r\nconst DualStatsCounter = () => {\r\n  const [goals, setGoals] = useState(0);\r\n  const [assists, setAssists] = useState(0);\r\n\u200b\r\n  const setGoalsHandler = () => setGoals(goals + 1);\r\n  const setAssistHandler = () => setAssists(assists + 1);\r\n\u200b\r\n  const incrementGoals = useCallback(setGoalsHandler, [goals]);\r\n  const incrementAssists = useCallback(setAssistHandler, [assists]);\r\n\u200b\r\n  const makeShowPlayerValue = useMemo(() => {\r\n    return goals * 7.3 * 1000 + \" Euro\";\r\n  }, [goals]);\r\n\u200b\r\n  return (\r\n    <>\r\n      <div>\r\n        Goals\r\n        <CountStats count={goals} onClick={incrementGoals} \/>\r\n      <\/div>\r\n      <div>\r\n        Assists\r\n        <CountStats count={assists} onClick={incrementAssists} \/>\r\n      <\/div>\r\n      Value: {makeShowPlayerValue}\r\n    <\/>\r\n  );\r\n};\r\n\u200b\r\n\u200b\r\nexport default DualStatsCounter;<\/pre>\r\n\r\n\r\n\r\n
As you can see from this example. If we don\u2019t put a useCallback on incrementGoals and incrementAssist, these functions will be recreated every time we click on it.<\/p>\r\n\r\n\r\n\r\n
Conclusion<\/strong><\/h2>\r\n\r\n\r\n\r\n
Be careful not to spend too much time on optimization because it won\u2019t always be worth it. You should optimize the part of the code that is doing something complex and changes props\/state frequently. My suggestion is that you start to optimize when you detect regressions in performance. Then you can easily test your application in the real-world and get the best feedback. In the end, just remember: React is fast, your code might not be!<\/p>\r\n","protected":false},"excerpt":{"rendered":"
When we talk about app optimizations and performance it\u2019s important to note it comes with a cost. Recently I\u2019ve been<\/p>\n","protected":false},"author":6,"featured_media":519,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[21],"tags":[],"class_list":["post-283","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend-development"],"acf":[],"yoast_head":"\nShould you start optimizing every part of your React app? - Agilno<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/makeit.com.hr\/agilno\/blog\/should-you-start-optimizing-every-part-of-your-react-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Should you start optimizing every part of your React app? - Agilno\" \/>\n<meta property=\"og:description\" content=\"When we talk about app optimizations and performance it\u2019s important to note it comes with a cost. Recently I\u2019ve been\" \/>\n<meta property=\"og:url\" content=\"https:\/\/makeit.com.hr\/agilno\/blog\/should-you-start-optimizing-every-part-of-your-react-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Agilno\" \/>\n<meta property=\"article:published_time\" content=\"2020-03-01T15:32:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-27T07:42:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/makeit.com.hr\/agilno\/wp-content\/uploads\/2020\/03\/performance-react-1280770.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"770\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Petar Vukasinovic\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Petar Vukasinovic\" \/>\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:\/\/makeit.com.hr\/agilno\/blog\/should-you-start-optimizing-every-part-of-your-react-app\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/makeit.com.hr\/agilno\/blog\/should-you-start-optimizing-every-part-of-your-react-app\/\"},\"author\":{\"name\":\"Petar Vukasinovic\",\"@id\":\"https:\/\/makeit.com.hr\/agilno\/#\/schema\/person\/443d3d24891bd90f096956d39a9fe70b\"},\"headline\":\"Should you start optimizing every part of your React app?\",\"datePublished\":\"2020-03-01T15:32:00+00:00\",\"dateModified\":\"2022-09-27T07:42:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/makeit.com.hr\/agilno\/blog\/should-you-start-optimizing-every-part-of-your-react-app\/\"},\"wordCount\":653,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/makeit.com.hr\/agilno\/blog\/should-you-start-optimizing-every-part-of-your-react-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/makeit.com.hr\/agilno\/wp-content\/uploads\/2020\/03\/performance-react-1280770.jpg\",\"articleSection\":[\"Frontend Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/makeit.com.hr\/agilno\/blog\/should-you-start-optimizing-every-part-of-your-react-app\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/makeit.com.hr\/agilno\/blog\/should-you-start-optimizing-every-part-of-your-react-app\/\",\"url\":\"https:\/\/makeit.com.hr\/agilno\/blog\/should-you-start-optimizing-every-part-of-your-react-app\/\",\"name\":\"Should you start optimizing every part of your React app? - Agilno\",\"isPartOf\":{\"@id\":\"https:\/\/makeit.com.hr\/agilno\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/makeit.com.hr\/agilno\/blog\/should-you-start-optimizing-every-part-of-your-react-app\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/makeit.com.hr\/agilno\/blog\/should-you-start-optimizing-every-part-of-your-react-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/makeit.com.hr\/agilno\/wp-content\/uploads\/2020\/03\/performance-react-1280770.jpg\",\"datePublished\":\"2020-03-01T15:32:00+00:00\",\"dateModified\":\"2022-09-27T07:42:30+00:00\",\"author\":{\"@id\":\"https:\/\/makeit.com.hr\/agilno\/#\/schema\/person\/443d3d24891bd90f096956d39a9fe70b\"},\"breadcrumb\":{\"@id\":\"https:\/\/makeit.com.hr\/agilno\/blog\/should-you-start-optimizing-every-part-of-your-react-app\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/makeit.com.hr\/agilno\/blog\/should-you-start-optimizing-every-part-of-your-react-app\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/makeit.com.hr\/agilno\/blog\/should-you-start-optimizing-every-part-of-your-react-app\/#primaryimage\",\"url\":\"https:\/\/makeit.com.hr\/agilno\/wp-content\/uploads\/2020\/03\/performance-react-1280770.jpg\",\"contentUrl\":\"https:\/\/makeit.com.hr\/agilno\/wp-content\/uploads\/2020\/03\/performance-react-1280770.jpg\",\"width\":1280,\"height\":770},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/makeit.com.hr\/agilno\/blog\/should-you-start-optimizing-every-part-of-your-react-app\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/makeit.com.hr\/agilno\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Should you start optimizing every part of your React app?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/makeit.com.hr\/agilno\/#website\",\"url\":\"https:\/\/makeit.com.hr\/agilno\/\",\"name\":\"Agilno\",\"description\":\"We build experiences, products, and businesses that create results\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/makeit.com.hr\/agilno\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/makeit.com.hr\/agilno\/#\/schema\/person\/443d3d24891bd90f096956d39a9fe70b\",\"name\":\"Petar Vukasinovic\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/2934c42d196fd827352e121fef4abc16d21d5c87a94f31906a04c8b1c9aff13f?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2934c42d196fd827352e121fef4abc16d21d5c87a94f31906a04c8b1c9aff13f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2934c42d196fd827352e121fef4abc16d21d5c87a94f31906a04c8b1c9aff13f?s=96&d=mm&r=g\",\"caption\":\"Petar Vukasinovic\"},\"url\":\"https:\/\/makeit.com.hr\/agilno\/author\/petar\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Should you start optimizing every part of your React app? - Agilno","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:\/\/makeit.com.hr\/agilno\/blog\/should-you-start-optimizing-every-part-of-your-react-app\/","og_locale":"en_US","og_type":"article","og_title":"Should you start optimizing every part of your React app? - Agilno","og_description":"When we talk about app optimizations and performance it\u2019s important to note it comes with a cost. Recently I\u2019ve been","og_url":"https:\/\/makeit.com.hr\/agilno\/blog\/should-you-start-optimizing-every-part-of-your-react-app\/","og_site_name":"Agilno","article_published_time":"2020-03-01T15:32:00+00:00","article_modified_time":"2022-09-27T07:42:30+00:00","og_image":[{"width":1280,"height":770,"url":"https:\/\/makeit.com.hr\/agilno\/wp-content\/uploads\/2020\/03\/performance-react-1280770.jpg","type":"image\/jpeg"}],"author":"Petar Vukasinovic","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Petar Vukasinovic","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/makeit.com.hr\/agilno\/blog\/should-you-start-optimizing-every-part-of-your-react-app\/#article","isPartOf":{"@id":"https:\/\/makeit.com.hr\/agilno\/blog\/should-you-start-optimizing-every-part-of-your-react-app\/"},"author":{"name":"Petar Vukasinovic","@id":"https:\/\/makeit.com.hr\/agilno\/#\/schema\/person\/443d3d24891bd90f096956d39a9fe70b"},"headline":"Should you start optimizing every part of your React app?","datePublished":"2020-03-01T15:32:00+00:00","dateModified":"2022-09-27T07:42:30+00:00","mainEntityOfPage":{"@id":"https:\/\/makeit.com.hr\/agilno\/blog\/should-you-start-optimizing-every-part-of-your-react-app\/"},"wordCount":653,"commentCount":0,"image":{"@id":"https:\/\/makeit.com.hr\/agilno\/blog\/should-you-start-optimizing-every-part-of-your-react-app\/#primaryimage"},"thumbnailUrl":"https:\/\/makeit.com.hr\/agilno\/wp-content\/uploads\/2020\/03\/performance-react-1280770.jpg","articleSection":["Frontend Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/makeit.com.hr\/agilno\/blog\/should-you-start-optimizing-every-part-of-your-react-app\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/makeit.com.hr\/agilno\/blog\/should-you-start-optimizing-every-part-of-your-react-app\/","url":"https:\/\/makeit.com.hr\/agilno\/blog\/should-you-start-optimizing-every-part-of-your-react-app\/","name":"Should you start optimizing every part of your React app? - Agilno","isPartOf":{"@id":"https:\/\/makeit.com.hr\/agilno\/#website"},"primaryImageOfPage":{"@id":"https:\/\/makeit.com.hr\/agilno\/blog\/should-you-start-optimizing-every-part-of-your-react-app\/#primaryimage"},"image":{"@id":"https:\/\/makeit.com.hr\/agilno\/blog\/should-you-start-optimizing-every-part-of-your-react-app\/#primaryimage"},"thumbnailUrl":"https:\/\/makeit.com.hr\/agilno\/wp-content\/uploads\/2020\/03\/performance-react-1280770.jpg","datePublished":"2020-03-01T15:32:00+00:00","dateModified":"2022-09-27T07:42:30+00:00","author":{"@id":"https:\/\/makeit.com.hr\/agilno\/#\/schema\/person\/443d3d24891bd90f096956d39a9fe70b"},"breadcrumb":{"@id":"https:\/\/makeit.com.hr\/agilno\/blog\/should-you-start-optimizing-every-part-of-your-react-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/makeit.com.hr\/agilno\/blog\/should-you-start-optimizing-every-part-of-your-react-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/makeit.com.hr\/agilno\/blog\/should-you-start-optimizing-every-part-of-your-react-app\/#primaryimage","url":"https:\/\/makeit.com.hr\/agilno\/wp-content\/uploads\/2020\/03\/performance-react-1280770.jpg","contentUrl":"https:\/\/makeit.com.hr\/agilno\/wp-content\/uploads\/2020\/03\/performance-react-1280770.jpg","width":1280,"height":770},{"@type":"BreadcrumbList","@id":"https:\/\/makeit.com.hr\/agilno\/blog\/should-you-start-optimizing-every-part-of-your-react-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/makeit.com.hr\/agilno\/"},{"@type":"ListItem","position":2,"name":"Should you start optimizing every part of your React app?"}]},{"@type":"WebSite","@id":"https:\/\/makeit.com.hr\/agilno\/#website","url":"https:\/\/makeit.com.hr\/agilno\/","name":"Agilno","description":"We build experiences, products, and businesses that create results","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/makeit.com.hr\/agilno\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/makeit.com.hr\/agilno\/#\/schema\/person\/443d3d24891bd90f096956d39a9fe70b","name":"Petar Vukasinovic","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/2934c42d196fd827352e121fef4abc16d21d5c87a94f31906a04c8b1c9aff13f?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2934c42d196fd827352e121fef4abc16d21d5c87a94f31906a04c8b1c9aff13f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2934c42d196fd827352e121fef4abc16d21d5c87a94f31906a04c8b1c9aff13f?s=96&d=mm&r=g","caption":"Petar Vukasinovic"},"url":"https:\/\/makeit.com.hr\/agilno\/author\/petar\/"}]}},"_links":{"self":[{"href":"https:\/\/makeit.com.hr\/agilno\/wp-json\/wp\/v2\/posts\/283","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/makeit.com.hr\/agilno\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/makeit.com.hr\/agilno\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/makeit.com.hr\/agilno\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/makeit.com.hr\/agilno\/wp-json\/wp\/v2\/comments?post=283"}],"version-history":[{"count":2,"href":"https:\/\/makeit.com.hr\/agilno\/wp-json\/wp\/v2\/posts\/283\/revisions"}],"predecessor-version":[{"id":486,"href":"https:\/\/makeit.com.hr\/agilno\/wp-json\/wp\/v2\/posts\/283\/revisions\/486"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/makeit.com.hr\/agilno\/wp-json\/wp\/v2\/media\/519"}],"wp:attachment":[{"href":"https:\/\/makeit.com.hr\/agilno\/wp-json\/wp\/v2\/media?parent=283"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/makeit.com.hr\/agilno\/wp-json\/wp\/v2\/categories?post=283"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/makeit.com.hr\/agilno\/wp-json\/wp\/v2\/tags?post=283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}