score:1
Accepted answer
custom hooks are designed to do exactly what you need^ to isolate and reuse its logic. you can read more about building custom hooks in official react documentation. your case is typical case for building custom hook: isolate state, effect and some couple of functions to operate over state in one hook. you can do it this way:
const useorderdata = (initialstate) => {
const [orderdata, setorderdata] = usestate(initialstate)
useeffect(() => {
// load suburb
setorderdata()
}, [data.postcode])
// other effects in case you need them
const iseditableaddress = orderdata.user.role === 'editor'
return [orderdata, { iseditableaddress }]
}
you can also add to custom hooks some functions, i change iseditableaddress
to variable cause its value will update every time data changing. using hook will looks like this:
const [data, { iseditableaddress }] = useorderdata({})
check this site, there is a lot of custom hook examples
Source: stackoverflow.com
Related Query
- REACT: How to create a reusable custom hook with functions and effects that can change & react to changes in a host component's data
- How can I pass my custom theme from a react project with material-ui to an equal one but that only has reusable components transpiled with roll-up?
- how can I test if useState hook has been called with jest and react testing library?
- How can I validate on blur with Semantic UI React and React Hook Form?
- How to make a react component that can be rendered with no data and later rendered with data?
- How to fetch data from a custom React hook (API) with onClick and display it in a Div using TypeScript?
- How to do a custom logic and redirect to another pages in react or nextjs with useEffect hook
- How to Create 3(country,state and city) dropdowns that populates data with each other in react js
- How to create a dynamic, custom React Table Component with action and status buttons
- How to access React router history object with component interface that has default custom hook specified
- How can I maintain state and "this" with react component functions
- How to create a local react library project with common components, and import that project locally
- How to create reusable function that uses state and props in React
- How can I test React custom hook with RTL which uses react-query?
- How to use react-testing-library and jest with mocked custom react hook updating?
- how to unit test a form that has state and method from a custom hook with jest
- How to create a div with arrow and divider for content such that they are aligned using react and css?
- React and progress bar. How can I add progress bar that will work with my input and my data
- How to create an excel file in react js with custom headings and styles while doing export to excel?
- How can I create and loop through a custom array within a react functional component?
- How to create an input formfield with button that uploads a file using react and javascript?
- How to test code that uses a custom hook based on useContext with react-testing-library and jest
- How can i render the side, only on a click and not with the React Hook useState?
- How to create forms with React and Rails?
- How to create a custom hook that recives dependencies?
- How to handle/chain synchronous side effects that depend on another with React hooks
- How can CKEditor be used with React.js in a way that allows React to recognize it?
- How can I find and click a button that has no text using React Testing Library?
- How to create custom React Native components with child nodes
- How can I create a custom page with #react-admin without the menu sidebar like login page?
More Query from same tag
- JS code in functional presentation component
- react-big-calendar month button click doesn't show all the data ( different in different browser)
- How can I create and loop through a custom array within a react functional component?
- React updating state only after second click
- Change checked attribute of controlled checkbox (React)
- ReactJS onClick not working - nothing happends in the browser and in the system console
- React + Redux + Router - should I use one state/store for all pages/components?
- Implement Read More feature for multiple textual children in React
- react-router-dom(ReactJS) nesting <Link /> components
- REACT- How do I raise a warning if a specific input field is empty with Yup?
- Partytown implementation with React.js
- React inline conditional component attribute
- React how to nest .map function
- Dynamically paste value in dot notation in react component
- Making SVG Responsive in React
- How can I add unique keys to React/MUI Autocomplete component?
- pass boolean state value from parent class to child class when a button is clicked in the parent class in react js so that i can load quizes with bool
- environment variables in heroku
- Prevent user from going back on browser if already logged in (react)
- React render an empty component
- React images get cut out of the body container in mobile view
- Updating redux state by a local state of checkbox items
- Nothing is displayed when I change the code of component in Reactjs?
- Awaiting status update from API with React Hooks (useEffect)?
- I want to style the Button Component with some properties but I see that I can't use classname in updated MUI5
- Why am I getting a 'no-unused-var' error when using in an inline function
- React Typescript Functional Component Syntax Error
- TypeScript: Property 'name' does not exist on type 'any[]'
- Binding forms at multiple different mount points with redux-form
- How do I combine two objects by merging the values of same properties?