How to handle manage global state across deeply nested components without Redux

0 votes

How to handle manage global state across deeply nested components without Redux?

I have an application with a very complex component structure, so I need to share the global state among them. But I don't want to use Redux because it looks too complicated for me, so tell me, how do you manage the global state in such a structure without using Redux?

Oct 21 in Web Development by Nidhi
• 1,840 points
65 views

1 answer to this question.

0 votes

Firstly , we should know what is global state? 

Global state refers to data that needs to be shared across multiple components in a React application.

To manage global state Redux is a popular solution but there are other effective ways to manage global state without using it . React has built-in solutions.

Methods to Manage Global State:

  1. Context API: This is like the secret weapon already built into React. If you’ve got state or data that you need to pass down through multiple layers of components, Context API can really save the day. It allows us to share the state across the entire component tree without needing to pass props manually at every level.
  • Let’s see how it works :

Step 1 : We will create a Context using React.createContext().

const NewContext = React.createContext();

Step 2 : We will wrap our components with a Provider as it allows any component within it to access the global state.

<NewContext.Provider value={ /*global state */}>
<App/>
</NewContext.Provider>

Step 3 : We can use useContext hook in any deeply nested component to access that global state.

const value = useContext(NewContext);
  1. Custom Hooks : If we want to write reusable and clean code , custom hooks can be a fantastic option.
function useGlobalState(){
const [state , setState] = useState(initialState);
return {state , setState };
}

Instead of passing data(props) through many layers of components, or dealing with complicated state management systems , we can create a custom hook like useGlobalState() to handle the state.

answered Oct 21 by Navya
• 380 points

Related Questions In Web Development

0 votes
0 answers
0 votes
0 answers

How to use colored circles in ASP Dropdownlist ListItems? (without jQuery)

Goal: I would like to have a ...READ MORE

Jul 27, 2022 in Web Development by gaurav
• 23,260 points
348 views
0 votes
0 answers

jquery-ui and webpack, how to manage it into module?

any idea how to deal with that ...READ MORE

Jul 28, 2022 in Web Development by gaurav
• 23,260 points
415 views
0 votes
1 answer

How to cast jQuery $.ajax calls to Bluebird promises without the deferred anit-pattern

jQuery have promises implemented with their AJAX ...READ MORE

answered Aug 1, 2022 in Web Development by rajatha
• 7,680 points
527 views
0 votes
1 answer

SEO-friendly React-Redux app

server-side rendering is needed to do seo ...READ MORE

answered Feb 14, 2022 in Others by narikkadan
• 63,640 points
439 views
0 votes
1 answer

SEO-friendly React-Redux app build

actually best choice is to use Nextjs ...READ MORE

answered Feb 24, 2022 in Others by narikkadan
• 63,640 points
630 views
0 votes
1 answer

Typescript: Property "XXX" does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes

Double check the newly added object types. ...READ MORE

answered Jun 8, 2022 in TypeSript by Nina
• 3,060 points
46,029 views
0 votes
1 answer

How to optimize the re-rendering of large amounts of child?

When dealing with components that render many ...READ MORE

answered Oct 21 in Web Development by Navya
• 380 points
55 views
0 votes
1 answer

Can you force a React component to rerender without calling setState?

We can force a React component to ...READ MORE

answered Oct 21 in Web Development by Navya
• 380 points
64 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP