In this blog, You will learn What React's Context API is and how to use React's Context API. It is very much used as a state management tool, oftentimes replacing Redux.
\nAccording to the React doc:
\n\nContext provides a way to pass data through the component tree\nwithout having to pass props down manually at every level.
\n
To be more clear, this provides a way for you to make values available to all components of your application, no matter how complicated your application is.
\nconst App = () => {\n return(\n <ParentClass color= "blue"/>\n );\n}\n\nconst ParentClass = (props) => (\n <ChildClass color= {props.color} />\n)\n\nconst ChildClass = (props) => (\n <GrandChildClass color= {props.color} />\n)\n\nconst GrandChildClass = (props) => (\n <p>Color: {props.color}</p>\n)In the above code, we designed the application in which used color props in the ParentClass and passed that props to all component (top to down) without checking that it is required by the child class or not and another issue also here that in case if GrandChildClass component was more deeply nested than it was very difficult to manage. This is the problem that Context solves. Context is designed the share values that can be considered \"global\" such as preferred language, current user, or theme.
Using context, we can avoid passing props. Let's create the above example code using context:
\nWe will create a separate component for context that we can use throughout the components.\nOnce you have initialized your project, create a file called ColorContext.js in your /src folder.
Using React.createContext, we can create context and pass anything as an argument to React.createContext. In our case, we are passing \"white\" color to provide a light theme.
This will also give me ColorContext.Provider and ColorContext.Consumer. What these two components do is straightforward:
import React from \"react\";
\nconst ColorContext = React.createContext(\"white\");\nexport default ColorContext;
\nTo use this context all over the components, we have to use the provider. According to React document, every context object comes with a Provider React component that allows consuming components to subscribe to context changes.
\nAfter successfully creating context, we can import context and use it to create our provider.\nAs we want to access context in the entire application, we need to wrap our app in ColorContext.Provider.
import ColorContext from './ColorContext';\n function App() {\n const color= "white";\n return (\n <ColorContext.Provider value = {color}>\n <div className="App">\n <header className="App-header">\n <img src={logo} className="App-logo" alt="logo" />\n <h1 className="App-title">Welcome to my web page</h1>\n </header>\n </div>\n </ColorContext.Provider>\n );\n }The approach to providing context is the same for class and functional components but consuming is a little different for both.
\nMainly used way to accessing context in class component using static contextType. After that, you can access the context value using this.context. You can refer to it in any lifecycle method and even in the render method.
import ColorContext from './ColorContext'\n\nclass Page extends Component {\n static contextType = ColorContext;\n\n componentDidMount() {\n const colorValue= this.context\n\n console.log(colorValue) // "white" \n }\n\n render() {\n return <div>Color Value is {colorValue} </div>\n }\n}The traditional way to accessing context values is by wrapping the child component in Consumer. From there, You can access values as props.
import { ColorContext} from './ColorContext'\n\nclass Page extends Component {\n render() {\n return (\n <ColorContext.Consumer>\n {(props) => {\n return <div>{props}</div>\n }}\n </ColorContext.Consumer>\n )\n }\n} You can use useContextin functional components and its equivalent of static contextType. \t
import React, { useContext } from 'react'\nimport ColorContextfrom './ColorContext'\n\nexport const HomePage = () => {\n const colorValue= useContext(ColorContext)\n\n return <div>{ColorContext}</div>\n}We can update the context by updating the normal state. We just need to create a wrapper class that contains the state of context and the method to update it.\nExample code with file ColorContext.js
import React, { Component } from 'react'\n\nconst ColorContext = React.createContext()\n\nclass ColorContextProvider extends Component {\n // Context state\n state = {\n color:""\n }\n\n // Method to update state\n setColor = (color) => {\n this.setState((prevState) => ({ color}))\n }\n\n render() {\n const { children } = this.props\n const { color } = this.state\n\n\n return (\n <ColorContext.Provider\n value={{\n color,\n this.setColor,\n }}\n >\n {children}\n </ColorContext.Provider>\n )\n }\n}\n\nexport default ColorContext\n\nexport { ColorContextProvider }Now you can update and view the user from the Context method.
\nimport ColorContext from './ColorContext'\n\nclass Page extends Component {\n static contextType = ColorContext;\n\n render() {\n const { color, setColor } = this.context\n\n return (\n <div>\n <button\n onClick={() => {\n const newColorValue= "black";\n\n setColor (newColorValue)\n }}\n >\n Update Color\n </button>\n <p>{`Current Color Value: ${color}`}</p>\n </div>\n )\n }\n}In my opinion, It is much easier to use than Redux and requires very little code, so why wouldn't you use it?
\nThe problem with the context is simple: ** Everything that consumes the context re-renders each time the state of that reference changes. **
\nThis means that if you're consuming your context everywhere in your app, or worse, using one context for the state of your entire app, you'll end up re-rendering a ton everywhere.
\n","frontmatter":{"date":"June 09, 2021","updated_date":null,"title":"React's Context API Guide with Example","tags":["React","Redux","Hooks"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/157af7ff069ab273224b4718433d9790/ee604/title-image.png","srcSet":"/static/157af7ff069ab273224b4718433d9790/69585/title-image.png 200w,\n/static/157af7ff069ab273224b4718433d9790/497c6/title-image.png 400w,\n/static/157af7ff069ab273224b4718433d9790/ee604/title-image.png 800w,\n/static/157af7ff069ab273224b4718433d9790/f3583/title-image.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Versha Gupta","github":"vershagupta","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/react-context-api/"},"html":"React context API, In this article you will explore what is Context API, what is react context API and how to use it in your React project. The Context API is a React structure that enables you to exchange unique details and assists in solving prop-drilling from all levels of your application.
\nThe React Context API is a way for a React app to effectively produce global variables that can be passed around. This is the alternative to \"prop drilling\" or moving props from grandparent to child to parent, and so on. Context is also touted as an easier, lighter approach to state management using Redux.
\nTalking about the Context APIs, they’re a (kind of) new feature added in version 16.3 of React that allows one to share state across the entire app (or part of it) lightly and with ease.
\nReact.createContext() is all you need. It returns a consumer and a provider. Provider is a component that as it's names suggests provides the state to its children. It will hold the \"store\" and be the parent of all the components that might need that store. Apart from the react context Provider, Consumer as it so happens is a component that consumes and uses the state. More information can be found on React's documentation page
\nNo. Well, not entirely.
\nRedux is great and came perfectly to answer the need for state management. Actually, it answered this need so well that it came to be known that you can't be a \"true\" React developer if you don't know your way around Redux.\nHowever, Redux has its disadvantages, and that's why it's important to know what Context API gives us that Redux doesn't:
\nSimplicity - When using redux people tend to manage almost all of their state in redux and it causes 2 problems:
\nRedux is just a concept. If you are comfortable with using reducers and actions and don't find hindering than you may also create reducers and actions that wrap Context API as the store as Redux's author Dan Abramov explained in his medium article about whether Redux is always required
\nYou might think to yourself: \"Well, I'm convinced. How do I implement Context API in react for my app?\" First, make sure you need it. Sometimes people use shared state across nested components instead of just passing it as props. And if you do need it you should follow these very few steps:
\nimport React, { createContext } from "react";\nconst UserContext = createContext();const UserProvider = ({ children }) => {\n const [name, setName] = useState("John Doe");\n const [age, setAge] = useState(1);\n const happyBirthday = () => setAge(age + 1);\n return (\n <UserContext.Provider value={{ name, age, happyBirthday }}>\n {children}\n </UserContext.Provider>\n );\n};const withUser = (Child) => (props) => (\n <UserContext.Consumer>\n {(context) => <Child {...props} {...context} />}\n {/* Another option is: {context => <Child {...props} context={context}/>}*/}\n </UserContext.Consumer>\n);The difference between the two options above is if you want the context to be a single nested property by this name, to explode it to its properties (which in my opinion is more convenient).
\nexport { UserProvider, withUser };ReactDOM.render(\n <UserProvider>\n <App />\n </UserProvider>,\n document.getElementById("root")\n);export default withUser(LoginForm);You'll also be able to notice I used the new \"Hooks\" feature that is shipped with React since version 16.8 to make it even neater and easier to create contexts.
\nI mentioned how people overuse Redux, and it also applies to Context API. Use it only when you need to share state between lot's of components with a lot of nesting.\nMost of the time, the data you have in one component will only be relevant to its children, so passing it in props is more indicative and nicer.
\n","frontmatter":{"date":"October 07, 2020","updated_date":null,"title":"React Context API: What is it and How it works?","tags":["React","Redux","Hooks"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5151515151515151,"src":"/static/caf00c33b55e22e63d32a724e11eea7d/14b42/react.jpg","srcSet":"/static/caf00c33b55e22e63d32a724e11eea7d/f836f/react.jpg 200w,\n/static/caf00c33b55e22e63d32a724e11eea7d/2244e/react.jpg 400w,\n/static/caf00c33b55e22e63d32a724e11eea7d/14b42/react.jpg 800w,\n/static/caf00c33b55e22e63d32a724e11eea7d/47498/react.jpg 1200w,\n/static/caf00c33b55e22e63d32a724e11eea7d/0226d/react.jpg 1499w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Eylon Ronen","github":"eylonronen","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/react-hooks-guide/"},"html":"I want to explain the inspiration for React Hooks in this walkthrough, what React Hook is and the advantages of hooks, and more. This article covers only an introduction to React Hooks. React Hooks have been introduced in React function components as a way of utilising state and side effects.
\nHave you ever assigned a task to change the functional component which is full of UI and business logic to a Class Component just because the new feature requires the use of state, just to toggle some text colour to red on some events occurred?
\nChances are there if you are a react developer, Hopefully we can solve this using the Hooks.
\nHooks are features that allow you to “hook into” the features of React state and lifecycle from function components. Hooks do not function inside classes. Without classes, they let you use React.
\n\n\nHooks are a new addition in React 16.8. They let you use state and other React features without writing a class.
\n
Dan Abramov has provided a well-rounded introduction to the API, and how and why the framework that many of us use has evolved to where it is now. You can read about it and watch his ReactConf 2018 keynote introducing the hooks proposal.
\nThe key takeaway maybe this:
\n\n\nIf the React community embraces hooks, it will reduce the number of concepts you need to juggle when writing React applications. Hooks let you always use functions instead of having to constantly switch between functions, classes, higher-order components, and render props.
\n
React Hooks enables the functional components to attach the local state to it, so that you can use React functionality without using a class component.
\nAdvantages of react hooks:
\nAs you all know there are two ways to create the React components, one is using the function and other is using the class, there is always a confusion between one v/s other.
\nLet us assume we have a simple class component and then we will convert it to a functional with hooks and see the difference.
\nimport React, { Component } from "react";\nclass Greeting extends Component {\n state = {\n text: "",\n };\n handleChange = (e) => {\n this.setState({ text: e.target.value });\n };\n render() {\n return <input value={this.state.text} onChange={this.handleChange} />;\n }\n}\nexport default Greeting; import React, { useState } from "react";\nexport default () => {\n const [text, setText] = useState("");\n return (\n <input\n value={text}\n onChange={(e) => {\n setText(e.target.value);\n }}\n />\n );\n};\n\nIf you disagree with any of the above, you can play with it in practice. I’m sure that would change your mind!
\n
Let us understand some basic hooks with examples.
\nI will take one example and will explain all the hooks in that example using a various scenarios.
\nimport React, { useState } from 'react';\n\nconst App = () => {\n const [message, setMessage] = useState('Hi there, how are you?');\n\n return <h1>{message}</h1>\n};\n\nexport default App;In this example variable message will save the value Hi there, how are you using the useState() hooks. It will be similar to this code we write in the constructor() of class component.
this.state = {\n message: "Hi there, how are you?"\n}\n\nIf you are wondering about the
\nsetMessage@line 3 then be calm, I will explain later in this tutorial
React useEffect() function can be executed in 3 different React component life cycles that are
Let's understand the useEffect() hook by taking the above example. So let's say I want to change the message 1 second after the component is mounted.
import React, { useState, useEffect } from "react";\n\nconst App = () => {\n const [message, setMessage] = useState("Hi there, how are you?");\n\n useEffect(() => {\n console.log("trigger use effect hook");\n\n setTimeout(() => {\n setMessage("I'm fine, thanks for asking.");\n }, 1000);\n });\n\n return <h1>{message}</h1>;\n};\n\nexport default App;As you can see, In this example we have used the useEffect hook to trigger the setMessage method the change the message variable after 1 second.
But there is one problem, while executing this component you can see that the console.log will trigger twice. The reason is the useEffect hook will by default trigger on change of either state or props similar to the componentDidUpdate method in our class component.
To overcome this kind of case we need to pass the Empty array ([]) as the second argument in the useEffect hooks. So updated code will look like this
\nimport React, { useState, useEffect } from 'react';\n\nconst App = () => {\n const [message, setMessage] = useState('Hi there, how are you?');\n\n useEffect(() => {\n console.log('trigger use effect hook');\n\n setTimeout(() => {\n setMessage("I'm fine, thanks for asking.");\n }, 1000)\n }, []);\n\n return <h1>{message}</h1>\n};\n\nexport default App;The above code means that hook will never be triggered as we have an empty array there, if we want to trigger the hook on a specific variable change of props or state we can add that variable in the array.
For eg : [state.message] here hook will fire on the update of message variable only.
I have covered the two basic and important hooks in this tutorial, there are many more types of hooks available in React, you can find the detailed explanation in the React docs.
\n\n\nWe can use eslint-plugin-react-hooks this eslint plugin that ensures the above two rules.
\n
So, from multiple points of view, we have covered the power of Hooks and seen how we can use controlled state in our Components without utilizing classes.
\nI hope you find this article useful, Happy Reading !!!
\n","frontmatter":{"date":"August 07, 2020","updated_date":null,"title":"React Hooks: A Beginners Guide","tags":["React","Hooks"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.36986301369863,"src":"/static/35867498747d433ab6d7d6e31ba37b17/ee604/react-hooks.png","srcSet":"/static/35867498747d433ab6d7d6e31ba37b17/69585/react-hooks.png 200w,\n/static/35867498747d433ab6d7d6e31ba37b17/497c6/react-hooks.png 400w,\n/static/35867498747d433ab6d7d6e31ba37b17/ee604/react-hooks.png 800w,\n/static/35867498747d433ab6d7d6e31ba37b17/f3583/react-hooks.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Mohammed Modi","github":"mohammed786","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/react-state-management/"},"html":"Biggest Challenge in React application is the management of state for frontend developers. In large applications, React alone is not sufficient to handle the complexity which is why some developers use React hooks and others use state management libraries such as Redux.
\nIn this post, We are going to take a closer look at both React hooks and Redux to manage the state.
\nReact components have a built-in state object. The state is encapsulated data where you store assets that are persistent between component renderings.
\nThe state is just a fancy term for a JavaScript data structure. If a user changes state by interacting with your application, the UI may look completely different afterwards, because it's represented by this new state rather than the old state.
\n\n\nMake a state variable responsible for one concern to use efficiently.
\n
React applications are built using components and they manage their state internally and it works well for applications with few components, but when the application grows bigger, the complexity of managing states shared across components becomes difficult.
\nHere is a simple example of an e-commerce application, in which the status of multiple components will change when purchasing a product.
\nIf developers do not have scalability in mind then it is really hard to find out what is happening when something goes wrong. This is why you need state management in your application.
\nLet’s discuss how to use react state management using react hooks and redux
\nRedux was created to resolve this particular issue. it provides a central store that holds all states of your application. Each component can access the stored state without sending it from one component to another. Here is a simple view of how Redux works.
\nThere are three building parts: actions, store, and reducers. Let’s briefly discuss what each of them does.
\nActions are payloads of information that send data from your application to your store. Actions are sent using store.dispatch(). Actions are created via an action creator.\nHere is an example action that represents adding a new todo item:
{ \ntype: "ADD_TODO", \npayload: {text:"Hello Foo"}\n }Here is an example of its action creator:
\nocnst addTodo = (text) => {\n return {\n type: "ADD_TODO",\n text\n };\n}Reducers specify how the application's state changes in response to actions sent to the store.\nAn example of how Reducer works in Redux is as follows:
\n const TODOReducer= (state = {}, action) => {\n switch (action.type) {\n case "ADD_TODO":\n return {\n ...state,\n ...action.payload\n };\n default:\n return state;\n }\n};The store holds the application state. You can access stored state, update the state, and register or unregister listeners via helper methods.
\nLet’s create a store for our TODO app:
\nconst store = createStore(TODOReducer);In other words, Redux gives you code organization and debugging superpowers. This makes it easier to build more maintainable code, and much easier to track down the root cause when something goes wrong.
\nThese are functions that hook you into React state and features from function components. Hooks don't work inside classes and it allows you to use React features without writing a class.
\nHooks are backwards-compatible, which means it doesn't keep any breaking changes. React provides some built-in Hooks like useState, UseEffect and useReducer etc. You can also make custom hooks.
Please see the following examples of some react hooks as follows:
\nuseState is a Hook that Lets you add React state to function components.\nExample:\nDeclaring a State Variable in class and initialize count state with 0 by setting this.state to {count:0}.
class Example extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n count: 0\n };\n }\n In a function component, we have no this, so we can’t assign or read this.state. Instead, we call the useState Hook directly inside our component:
function Example() {\n const [count, setCount] = useState(0);\n}We declare a state variable called count and set it to 0. React will remember its current value between re-renders, and provide the most recent one to our function. If we want to update the current count, we can call setCount.
\nuseReducer is a hook I use sometimes to manage the state of the application. It is very similar to the useState hook, just more complex. useReducer hook uses the same concept as the reducers in Redux. It is basically a pure function, with no side-effects.
Example of useReducer:
\nuseReducer creates an independent component co-located state container within your component. Whereas Redux creates a global state container that hangs somewhere above your entire application.
\n +----------------+ +----------------+\n | Component A | | |\n | | | |\n | | | Redux |\n +----------------+ | |\n | connect Redux |<-------------| |\n +--------+-------+ +--------+-------+\n | |\n +---------+-----------+ |\n | | |\n | | |\n+--------+-------+ +--------+-------+ |\n| Component B | | Component C | |\n| | | | |\n| | | | |\n+----------------+ +----------------+ |\n| useReducer | | connect Redux |<----------+\n+----------------+ +--------+-------+\n |\n +--------+-------+\n | Component D |\n | |\n | |\n +----------------+Below an example of todo items is completed or not using the useReducer react hook.
\nSee the following function which is a reducer function for managing state transitions for a list of items:
\n const todoReducer = (state, action) => {\n switch (action.type) {\n case "ADD_TODO":\n return state.map(todo => {\n if (todo.id === action.id) {\n return { ...todo, complete: true };\n } else {\n return todo;\n }\n });\n case "REMOVE_TODO":\n return state.map(todo => {\n if (todo.id === action.id) {\n return { ...todo, complete: false };\n } else {\n return todo;\n }\n });\n default:\n return state;\n }\n };There are two types of actions which are equivalent to two states. they used to toggle the complete boolean field and additional payload to identify incoming action.
\nThe state which is managed in this reducer is an array of items:
\nconst initialTodos = [\n {\n id: "t1",\n task: "Add Task 1",\n complete: false\n },\n {\n id: "t2",\n task: "Add Task 2",\n complete: false\n }\n ];In code, The useReducer hook is used for complex state and state transitions. It takes a reducer function and an initial state as input and returns the current state and a dispatch function as output
\n const [todos, dispatch] = React.useReducer(\n todoReducer,\n initialTodos\n );Complete file:
\nimport React from "react";\n\nconst initialTodos = [\n {\n id: "t1",\n task: "Add Task 1",\n complete: false\n },\n {\n id: "t2",\n task: "Add Task 2",\n complete: false\n }\n];\nconst todoReducer = (state, action) => {\n switch (action.type) {\n case "ADD_TODO":\n return state.map(todo => {\n if (todo.id === action.id) {\n return { ...todo, complete: true };\n } else {\n return todo;\n }\n });\n case "REMOVE_TODO":\n return state.map(todo => {\n if (todo.id === action.id) {\n return { ...todo, complete: false };\n } else {\n return todo;\n }\n });\n default:\n return state;\n }\n};\nconst App = () => {\n const [todos, dispatch] = React.useReducer(todoReducer, initialTodos);\n\n const handleChange = todo => {\n dispatch({\n type: todo.complete ? "REMOVE_TODO" : "ADD_TODO",\n id: todo.id\n });\n };\n return (\n <ul>\n {todos.map(todo => (\n <li key={todo.id}>\n <label>\n <input\n type="checkbox"\n checked={todo.complete}\n onChange={() => handleChange(todo)}\n />\n {todo.task}\n </label>\n </li>\n ))}\n </ul>\n );\n};\n\nexport default App;Let’s do a similar example with Redux.
\nStore in App.js.
\nimport React from "react";\nimport { Provider } from "react-redux";\nimport { createStore } from "redux";\nimport rootReducer from "./reducers";\nimport Todo from "./Components/TODO";\nconst store = createStore(rootReducer);\n\nfunction App() {\n return (\n <div className="App">\n <Provider store={store}>\n <Todo />\n </Provider>\n </div>\n );\n}\n\nexport default App;Actions in actions/index.js.
\nexport const addTodo = id => ({\n type: "ADD_TODO",\n id\n});\n\nexport const removeTodo = id => ({\n type: "REMOVE_TODO",\n id\n});Reducers in reducers/index.js.
\nconst initialTodos = [\n {\n id: "t1",\n task: "Add Task 1",\n complete: false\n },\n {\n id: "t2",\n task: "Add Task 2",\n complete: false\n }\n];\nconst todos = (state = initialTodos, action) => {\n switch (action.type) {\n case "ADD_TODO":\n return state.map(todo => {\n if (todo.id === action.id) {\n return { ...todo, complete: true };\n } else {\n return todo;\n }\n });\n case "REMOVE_TODO":\n return state.map(todo => {\n if (todo.id === action.id) {\n return { ...todo, complete: false };\n } else {\n return todo;\n }\n });\n default:\n return state;\n }\n};\n\nexport default todos;FIle components/Todo.js
\nimport React from "react";\nimport { connect } from "react-redux";\nimport { addTodo, removeTodo } from "../../redux/actions/authActions";\n\nconst Todo = ({ todos, addTodo, removeTodo }) => {\n const handleChange = todo => {\n if (todo.complete) {\n removeTodo(todo.id);\n } else {\n addTodo(todo.id);\n }\n };\n\n return (\n <ul>\n {todos.map(todo => (\n <li key={todo.id}>\n <label>\n <input\n type="checkbox"\n checked={todo.complete}\n onChange={() => handleChange(todo)}\n />\n {todo.task}\n </label>\n </li>\n ))}\n </ul>\n );\n};\n\nconst mapStateToProps = state => ({ todos: state.auth.todos });\nconst mapDispatchToProps = dispatch => {\n return {\n addTodo: id => dispatch(addTodo(id)),\n removeTodo: id => dispatch(removeTodo(id))\n };\n};\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(Todo);React offers react hooks which can be used as an alternative for connect(). You can use built-in hooks mainly useState, UseReducer and useContext and because of these you often may not require Redux.
But for large applications, you can use both redux and react hooks. it works great! React Hook is a useful new feature, and the addition of React-Redux with Redux-specific hooks is a great step towards simplifying Redux development.
\n","frontmatter":{"date":"July 17, 2020","updated_date":null,"title":"React state management: What is it and why to use it?","tags":["React","Redux","Hooks"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/ef27359624480604211f0e018dd47f18/bc59e/title-image.png","srcSet":"/static/ef27359624480604211f0e018dd47f18/69585/title-image.png 200w,\n/static/ef27359624480604211f0e018dd47f18/497c6/title-image.png 400w,\n/static/ef27359624480604211f0e018dd47f18/bc59e/title-image.png 512w","sizes":"(max-width: 512px) 100vw, 512px"}}},"author":{"id":"Versha Gupta","github":"vershagupta","avatar":null}}}}]}},"pageContext":{"tag":"Hooks"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}