Prerequisites<\/h2>\n\n- Basic knowledge of React Native<\/li>\n
- Familiarity with functional and class components, props, state, etc.<\/li>\n<\/ul>\n
So, moving forward with the introduction of hooks in React Native.<\/p>\n
Introducing Hooks in React Native<\/h2>\n
Hooks are a new feature addition in React Native version 16.8, which allows you to use React Native features without writing a class. These built-in functions let React Native developers use state and lifecycle methods inside functional components. With hooks, the complexity of developing the application is lessened. Keep in mind that hooks don\u2019t work inside classes.<\/p>\n
Why Hooks?<\/h2>\n
Here are a few reasons for using hooks in your React Native application.<\/p>\n
\n- Different ways of doing the same things.<\/li>\n
- No more complex lifecycle methods.<\/li>\n
- Simpler code. No more mapStateToProps, mapDispatchToprops with Redux.<\/li>\n
- Hooks avoid the whole confusion with ‘this’ keyword.<\/li>\n
- Hooks allow you to reuse stateful logic without changing your component hierarchy.<\/li>\n
- Hooks let us organize the logic inside a component into reusable isolated units.<\/li>\n<\/ul>\n
Now let’s learn how we move from a class to a functional component.<\/p>\n
Are you looking for skilled and proficient React Native developers?<\/span>
\nHere we are to end your search. Contact us today and hire React Native developer<\/a>. We assure you of the application quality and performance.<\/strong><\/i><\/p>\nReact Native Hooks Lifecycle<\/h2>\n
There are three stages of the lifecycle:<\/p>\n
1. Initial Render<\/h3>\n\r\ngetDerivedStateFromProps\r\n \t\tuseEffect( ()=>{},[propp1, prop2])\r\n\tcomponentDidMount\r\n\t\tuseEffect( ()=> {},[])\r\n<\/pre>\n2. Updates<\/h3>\n\r\ngetDerivedStateFromProps\r\n \t\tuseEffect( ()=>{},[propp1, prop2])\r\n\r\nshouldComponentUpdate()\r\n\tuseMemo()\r\n\r\ncomponentdidUpdate()\r\n\tuseEffect( ()=>{})\r\n\r\ngetSnapshotBeforeUpdate\r\n\tcustom Hook to hold previous state\r\n<\/pre>\n3. Unmount<\/h3>\n\t\r\n\t\tuseEffect( ()=>{return()=>{\/\/cleanup}},[])\r\n<\/pre>\nThus, we can use hooks to handle states, effects, and context with the help of useState, useEffect, and useContext.<\/p>\n
Let\u2019s move towards our next section and dive deeper into hooks. <\/p>\n
Hooks in React Native: Classification:<\/h2>\n
There are three basic React Native hooks and seven additional hooks.<\/p>\n
Basic Hooks<\/strong><\/p>\n(1) useState<\/p>\n
(2) useEffect<\/p>\n
(3) useContext<\/p>\n
Additional Hooks: <\/strong><\/p>\n(1) useReducer<\/p>\n
(2) useCallback<\/p>\n
(3) useMemo<\/p>\n
(4) useRef<\/p>\n
(5) useImperativeHandle<\/p>\n
(6) useLayoutEffect<\/p>\n
(7) useDebugValue<\/p>\n
React Native Hooks Example<\/h2>\n
In this tutorial we will cover useState, useEffect, useContext, useReducer, useMemo, useCallback, and useRef.<\/p>\n
useState<\/h3>\n
useState is like this.state() in class. We are going to use useState instead of this.state() to update the state value. Unlike the class, the state is not an object here. We have to initialize the useState() with some value. It can be a number or string, whatever we want. If you have to store multiple values, then for each value, you have to call useState().<\/p>\n
Syntax<\/strong><\/p>\nConst [data, setData] = useState( \/\/ value )<\/pre>\nThe below image would help to understand hooks better.<\/p>\n
![\"React](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/08\/React-Natvie-Table-1.png\")
<\/p>\n
This example declares a state variable name initialized with an empty string. When writing in the text input name, the variable value will be changed.<\/p>\n
Also Read: How to Use Redux with React Hooks in React Native Application<\/a>?<\/p>\nuseEffect<\/h3>\n
useEffect is worked as per class lifecycle componentDidMount<\/strong>, componentWillUnMount<\/strong>, componentdidUpdate<\/strong>. useEffect is just re-render the Component and changing the state variable\u2019s value. uesEffect accepts two arguments and doesn\u2019t return anything.<\/p>\nThe first argument is a function that holds the code whatever you want to execute at run time. The second argument is optional when you want to execute the hooks. If you do not pass anything to this argument, your function will be called on mount and every update.<\/p>\n
![\"useEffect\"](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/08\/useEffect-min.png\")
<\/p>\n
The above example shows how we can apply useEffect in functional components. At interval time, the state value will be changed. useEffect() is a side effect used as an event handler to change the state value when you want.<\/p>\n
useContext<\/h3>\n
This is another hook for anyone unfamiliar with context API in react native. First, let\u2019s have a look at it. Consider the below image that shows an application has many components.<\/p>\n
App Component is our parent component, and within the App component, there are various child components.<\/p>\n
![\"App](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/08\/App-component-min.png\")
<\/p>\n
You can see the dependency tree in the image above. Here, we have a limitation of a three-level hierarchy. Imagine if we have a 10 to 20-level hierarchy. In such cases, the useContext hook reduces our efforts from passing props to every level.<\/p>\n
\r\nconst value = useContext(MyContext);\r\n<\/pre>\nDon\u2019t forget that the argument to useContext must be the context object itself. Now let you get some basic knowledge about Additional Hooks.<\/p>\n
useReducer<\/h3>\n
useReducer additional hook used as a state management tool. Okay, now don\u2019t we already have useState for state management? Yes, we do have. But, under a few conditions and requirements, it is advisable to use useReducer rather than useState. The next question would be these requirements and the difference between hooks.<\/p>\n
To know the difference, let\u2019s have an example. Here we are going to take a counter-example again.<\/p>\n
![\"useReducer\"](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/08\/useReducer-min.png\")
<\/p>\n
We can handle the different actions at once with useReducer. Run the project; we can increase, decrease, and reset the count value by clicking on the increment, decrement, and reset.<\/p>\n
useReducer vs. useState<\/h4>\n
1. Depends on the type of state. If you need to use string, boolean or number value, then choose use useState. And if array or object, then go with the useReducer.<\/p>\n
2. The second scenario depends on the number of transitions. If you are updating one or two states, then use useState. And if there are too many updates, then use useReducer.<\/p>\n
3. The third one depends on the business logic for the state transition. If you do the complex transition or transfer value old to the new, then better to use useReducer.<\/p>\n
4. Fourth is for local or global states. If your state is within the one component, you can use useState, and if your state is at a global level, you must go with useReducer.<\/p>\n
useCallback<\/h3>\n
The next hook is useCallback. With each component rendering, functions are recreated. useCallback always returns the memoized version of the function. After using the useCallback function, it will only be changed when one of the dependencies has.<\/p>\n
It is useful when some callbacks are passed to the child component, and with that, you can prevent unnecessary renders every time. Like useEffect, useCallback takes a function and an array of dependencies as a parameter. If one of the dependencies’ values changes, the function\u2019s return value will be changed; otherwise, it will always return the cached value.<\/p>\n
Assume we have a parent-child component and pass a prop from parent to child component. In such a case, the props within the child component will be called unnecessary whenever the parent component is re-rendered. We can use the useCallback() hook to prevent such unwanted re-renders.<\/p>\n
![\"useCallback\"](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/08\/useCallback-min.png\")
<\/p>\n
In the above example, the problem is that all three functions are re-created whenever the counter value is updated. In this case, it is not a big problem to recreate the function unless we don\u2019t have multiple functions. For an application, this might be a big problem in performance for our app. For this problem, we can use useCallback(). So in the above example, we can warp all these functions with useCallback().<\/p>\n
const increment = useCallback(() => { \r\n setCount(count + 1) \r\n}, [count]) \r\nconst decrement = useCallback(() => { \r\n setCount(count - 1) \r\n}, [count]) \r\nconst reset = useCallback(O) => { \r\n resetCount(reset) \r\n}, (reset)\r\n<\/pre>\nSo now you click any of the counters, the related state will be changed and re-initialized. for the better and to prevent optimization, we can use the useCallback() hook.<\/p>\n
useMemo<\/h3>\n
useMemo() hook is just like useCallback() hook. The difference is that useCallback returns memoized callback, and useMemo returns a memoized value. If you are creating an application that includes extensive data processing, then using the useMemo() hook is a better choice.<\/p>\n
So, it will work once at the first render in the application, and then the cached value will be returned every time. If you have userName to pass every time in the application components, then the operation will be done just once with the help of useMemo().<\/p>\n
Then state value will be stored in a memoized value, and when you want to use it, you will get it much faster.<\/p>\n
useMemo(()=>{\r\n\tdosomething()\r\n},[dependencies])\r\n<\/pre>\nIf you don’t want to pass arguments, remember to add an empty array as a parameter to useMemo(); otherwise, memoization will not happen. And if you wish to pass arguments, you can also pass them.<\/p>\n
useRef<\/h3>\n
useRef is like a container that can store mutable values in its .current property. With Ref, we can access all the DOM nodes and elements and keep a mutable variable. We all know about a ref in React Native.<\/p>\n
Syntax<\/strong><\/p>\n\r\nconst refContainer = useRef(initialValue);\r\n<\/pre>\nCreating createRef in the functional component will create a new instance at every render of DOM. Updating a ref is a side effect. It must be done inside the useEffect() or an event handler. However, the component will not re-render when the useRef value changes. For that, we can use useState().<\/p>\n
Some Rules<\/h4>\n\u201cOnly call Hooks at the top level.\u201d<\/strong><\/p>\nDon\u2019t call hooks inside loops, conditions, or nested functions.<\/p>\n
\u201cOnly call Hooks from react-native functions.\u201d<\/strong><\/p>\nCall hooks from React Native Components or Custom Hooks; don\u2019t call them from regular functions.<\/p>\n
Wrapping Up<\/h2>\n
If you are looking for assistance in building a React native application with the help of React Native Hooks, then get in touch with us today. We are a globally renowned React Native app development company<\/a>, and we have well-versed React Native developers who have top-of-the-line expertise in building React Native app with React Native Hooks. Also, for more such tutorials, you can visit React Native tutorials<\/a> page and explore more.<\/p>\n","protected":false},"excerpt":{"rendered":"Introduction React Native has introduced React Native Hooks, which are functions to let you hook into React Native state and lifecycle features from the function components. Hooks are quite popular in React ecosystem; moreover, hooks have reduced lines of code and developers’ efforts. If you are still not familiar with React hooks, this tutorial will […]<\/p>\n","protected":false},"author":170,"featured_media":14226,"comment_status":"open","ping_status":"open","sticky":false,"template":"blog-new-template.php","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[714],"tags":[],"coauthors":[2430],"class_list":["post-14205","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native"],"acf":[],"modified_by":"Binal Prajapati","_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/14205","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/users\/170"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=14205"}],"version-history":[{"count":0,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/14205\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media\/14226"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=14205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=14205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=14205"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/coauthors?post=14205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
So, moving forward with the introduction of hooks in React Native.<\/p>\n
Introducing Hooks in React Native<\/h2>\n
Hooks are a new feature addition in React Native version 16.8, which allows you to use React Native features without writing a class. These built-in functions let React Native developers use state and lifecycle methods inside functional components. With hooks, the complexity of developing the application is lessened. Keep in mind that hooks don\u2019t work inside classes.<\/p>\n
Why Hooks?<\/h2>\n
Here are a few reasons for using hooks in your React Native application.<\/p>\n
- \n
- Different ways of doing the same things.<\/li>\n
- No more complex lifecycle methods.<\/li>\n
- Simpler code. No more mapStateToProps, mapDispatchToprops with Redux.<\/li>\n
- Hooks avoid the whole confusion with ‘this’ keyword.<\/li>\n
- Hooks allow you to reuse stateful logic without changing your component hierarchy.<\/li>\n
- Hooks let us organize the logic inside a component into reusable isolated units.<\/li>\n<\/ul>\n
Now let’s learn how we move from a class to a functional component.<\/p>\n
Are you looking for skilled and proficient React Native developers?<\/span>
\nHere we are to end your search. Contact us today and hire React Native developer<\/a>. We assure you of the application quality and performance.<\/strong><\/i><\/p>\nReact Native Hooks Lifecycle<\/h2>\n
There are three stages of the lifecycle:<\/p>\n
1. Initial Render<\/h3>\n
\r\ngetDerivedStateFromProps\r\n \t\tuseEffect( ()=>{},[propp1, prop2])\r\n\tcomponentDidMount\r\n\t\tuseEffect( ()=> {},[])\r\n<\/pre>\n2. Updates<\/h3>\n
\r\ngetDerivedStateFromProps\r\n \t\tuseEffect( ()=>{},[propp1, prop2])\r\n\r\nshouldComponentUpdate()\r\n\tuseMemo()\r\n\r\ncomponentdidUpdate()\r\n\tuseEffect( ()=>{})\r\n\r\ngetSnapshotBeforeUpdate\r\n\tcustom Hook to hold previous state\r\n<\/pre>\n3. Unmount<\/h3>\n
\t\r\n\t\tuseEffect( ()=>{return()=>{\/\/cleanup}},[])\r\n<\/pre>\nThus, we can use hooks to handle states, effects, and context with the help of useState, useEffect, and useContext.<\/p>\n
Let\u2019s move towards our next section and dive deeper into hooks. <\/p>\n
Hooks in React Native: Classification:<\/h2>\n
There are three basic React Native hooks and seven additional hooks.<\/p>\n
Basic Hooks<\/strong><\/p>\n
(1) useState<\/p>\n
(2) useEffect<\/p>\n
(3) useContext<\/p>\n
Additional Hooks: <\/strong><\/p>\n
(1) useReducer<\/p>\n
(2) useCallback<\/p>\n
(3) useMemo<\/p>\n
(4) useRef<\/p>\n
(5) useImperativeHandle<\/p>\n
(6) useLayoutEffect<\/p>\n
(7) useDebugValue<\/p>\n
React Native Hooks Example<\/h2>\n
In this tutorial we will cover useState, useEffect, useContext, useReducer, useMemo, useCallback, and useRef.<\/p>\n
useState<\/h3>\n
useState is like this.state() in class. We are going to use useState instead of this.state() to update the state value. Unlike the class, the state is not an object here. We have to initialize the useState() with some value. It can be a number or string, whatever we want. If you have to store multiple values, then for each value, you have to call useState().<\/p>\n
Syntax<\/strong><\/p>\n
Const [data, setData] = useState( \/\/ value )<\/pre>\n
The below image would help to understand hooks better.<\/p>\n
<\/p>\nThis example declares a state variable name initialized with an empty string. When writing in the text input name, the variable value will be changed.<\/p>\n
Also Read: How to Use Redux with React Hooks in React Native Application<\/a>?<\/p>\n
useEffect<\/h3>\n
useEffect is worked as per class lifecycle componentDidMount<\/strong>, componentWillUnMount<\/strong>, componentdidUpdate<\/strong>. useEffect is just re-render the Component and changing the state variable\u2019s value. uesEffect accepts two arguments and doesn\u2019t return anything.<\/p>\n
The first argument is a function that holds the code whatever you want to execute at run time. The second argument is optional when you want to execute the hooks. If you do not pass anything to this argument, your function will be called on mount and every update.<\/p>\n
<\/p>\nThe above example shows how we can apply useEffect in functional components. At interval time, the state value will be changed. useEffect() is a side effect used as an event handler to change the state value when you want.<\/p>\n
useContext<\/h3>\n
This is another hook for anyone unfamiliar with context API in react native. First, let\u2019s have a look at it. Consider the below image that shows an application has many components.<\/p>\n
App Component is our parent component, and within the App component, there are various child components.<\/p>\n
<\/p>\nYou can see the dependency tree in the image above. Here, we have a limitation of a three-level hierarchy. Imagine if we have a 10 to 20-level hierarchy. In such cases, the useContext hook reduces our efforts from passing props to every level.<\/p>\n
\r\nconst value = useContext(MyContext);\r\n<\/pre>\n
Don\u2019t forget that the argument to useContext must be the context object itself. Now let you get some basic knowledge about Additional Hooks.<\/p>\n
useReducer<\/h3>\n
useReducer additional hook used as a state management tool. Okay, now don\u2019t we already have useState for state management? Yes, we do have. But, under a few conditions and requirements, it is advisable to use useReducer rather than useState. The next question would be these requirements and the difference between hooks.<\/p>\n
To know the difference, let\u2019s have an example. Here we are going to take a counter-example again.<\/p>\n
<\/p>\nWe can handle the different actions at once with useReducer. Run the project; we can increase, decrease, and reset the count value by clicking on the increment, decrement, and reset.<\/p>\n
useReducer vs. useState<\/h4>\n
1. Depends on the type of state. If you need to use string, boolean or number value, then choose use useState. And if array or object, then go with the useReducer.<\/p>\n
2. The second scenario depends on the number of transitions. If you are updating one or two states, then use useState. And if there are too many updates, then use useReducer.<\/p>\n
3. The third one depends on the business logic for the state transition. If you do the complex transition or transfer value old to the new, then better to use useReducer.<\/p>\n
4. Fourth is for local or global states. If your state is within the one component, you can use useState, and if your state is at a global level, you must go with useReducer.<\/p>\n
useCallback<\/h3>\n
The next hook is useCallback. With each component rendering, functions are recreated. useCallback always returns the memoized version of the function. After using the useCallback function, it will only be changed when one of the dependencies has.<\/p>\n
It is useful when some callbacks are passed to the child component, and with that, you can prevent unnecessary renders every time. Like useEffect, useCallback takes a function and an array of dependencies as a parameter. If one of the dependencies’ values changes, the function\u2019s return value will be changed; otherwise, it will always return the cached value.<\/p>\n
Assume we have a parent-child component and pass a prop from parent to child component. In such a case, the props within the child component will be called unnecessary whenever the parent component is re-rendered. We can use the useCallback() hook to prevent such unwanted re-renders.<\/p>\n
<\/p>\nIn the above example, the problem is that all three functions are re-created whenever the counter value is updated. In this case, it is not a big problem to recreate the function unless we don\u2019t have multiple functions. For an application, this might be a big problem in performance for our app. For this problem, we can use useCallback(). So in the above example, we can warp all these functions with useCallback().<\/p>\n
const increment = useCallback(() => { \r\n setCount(count + 1) \r\n}, [count]) \r\nconst decrement = useCallback(() => { \r\n setCount(count - 1) \r\n}, [count]) \r\nconst reset = useCallback(O) => { \r\n resetCount(reset) \r\n}, (reset)\r\n<\/pre>\nSo now you click any of the counters, the related state will be changed and re-initialized. for the better and to prevent optimization, we can use the useCallback() hook.<\/p>\n
useMemo<\/h3>\n
useMemo() hook is just like useCallback() hook. The difference is that useCallback returns memoized callback, and useMemo returns a memoized value. If you are creating an application that includes extensive data processing, then using the useMemo() hook is a better choice.<\/p>\n
So, it will work once at the first render in the application, and then the cached value will be returned every time. If you have userName to pass every time in the application components, then the operation will be done just once with the help of useMemo().<\/p>\n
Then state value will be stored in a memoized value, and when you want to use it, you will get it much faster.<\/p>\n
useMemo(()=>{\r\n\tdosomething()\r\n},[dependencies])\r\n<\/pre>\nIf you don’t want to pass arguments, remember to add an empty array as a parameter to useMemo(); otherwise, memoization will not happen. And if you wish to pass arguments, you can also pass them.<\/p>\n
useRef<\/h3>\n
useRef is like a container that can store mutable values in its .current property. With Ref, we can access all the DOM nodes and elements and keep a mutable variable. We all know about a ref in React Native.<\/p>\n
Syntax<\/strong><\/p>\n
\r\nconst refContainer = useRef(initialValue);\r\n<\/pre>\n
Creating createRef in the functional component will create a new instance at every render of DOM. Updating a ref is a side effect. It must be done inside the useEffect() or an event handler. However, the component will not re-render when the useRef value changes. For that, we can use useState().<\/p>\n
Some Rules<\/h4>\n
Don\u2019t call hooks inside loops, conditions, or nested functions.<\/p>\n
\u201cOnly call Hooks from react-native functions.\u201d<\/strong><\/p>\n
Call hooks from React Native Components or Custom Hooks; don\u2019t call them from regular functions.<\/p>\n
Wrapping Up<\/h2>\n
If you are looking for assistance in building a React native application with the help of React Native Hooks, then get in touch with us today. We are a globally renowned React Native app development company<\/a>, and we have well-versed React Native developers who have top-of-the-line expertise in building React Native app with React Native Hooks. Also, for more such tutorials, you can visit React Native tutorials<\/a> page and explore more.<\/p>\n","protected":false},"excerpt":{"rendered":"
Introduction React Native has introduced React Native Hooks, which are functions to let you hook into React Native state and lifecycle features from the function components. Hooks are quite popular in React ecosystem; moreover, hooks have reduced lines of code and developers’ efforts. If you are still not familiar with React hooks, this tutorial will […]<\/p>\n","protected":false},"author":170,"featured_media":14226,"comment_status":"open","ping_status":"open","sticky":false,"template":"blog-new-template.php","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[714],"tags":[],"coauthors":[2430],"class_list":["post-14205","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native"],"acf":[],"modified_by":"Binal Prajapati","_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/14205","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/users\/170"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=14205"}],"version-history":[{"count":0,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/14205\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media\/14226"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=14205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=14205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=14205"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/coauthors?post=14205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}