react-context

Component not re rendering when value from useContext is updated

by

The issue is likely that you’re mutating the array (rather than setting a new array) so React sees the array as the same using shallow equality. Changing your addOrder method to assign a new array should fix this issue: const addToOrder = (idToAdd, quantityToAdd = 1) => setProducts([ …products, { id: idToAdd, quantity: quantityToAdd } … Read more

How to get the data from React Context Consumer outside the render

by

Update As of React v16.6.0, you can use the context API like: class App extends React.Component { componentDidMount() { console.log(this.context); } render() { // render part here // use context with this.context } } App.contextType = CustomContext However, the component can only access a single context. In order to use multiple context values, use the … Read more

Testing an error thrown by a React component using testing-library and jest

by

As you already mentioned there is expect().toThrow() 🙂 So in your case: test(“should throw error when not wrapped inside `UserProvider`”, () => { expect(() => render(<TestComponent />)) .toThrow(“Cannot use `useUser` outside of `UserProvider`”); }); Regarding the console.error: Currently there is by design no way to turn off the default error logs. If you want to … Read more

Too many React Context providers

by

If you want a solution for composing Providers without any third-party libraries, here’s one with Typescript annotations: // Compose.tsx interface Props { components: Array<React.JSXElementConstructor<React.PropsWithChildren<unknown>>> children: React.ReactNode } export default function Compose(props: Props) { const { components = [], children } = props return ( <> {components.reduceRight((acc, Comp) => { return <Comp>{acc}</Comp> }, children)} </> ) … Read more

React createContext issue in Typescript?

by

It appears defaultValue value for React.createContext is expected to be of type: interface IContextProps { state: IState; dispatch: ({type}:{type:string}) => void; } Once Context object is created for this type, for example like this: export const AdminStore = React.createContext({} as IContextProps); Provider React component should no longer complain about the error. Here is the list … Read more

Apollo Client Cache vs. Redux

by

You’re comparing apples to oranges. Yes, at a high level both redux and apollo-client provide a way for you to manage global application state. However, redux allows you to create a predictable state container that changes in response to the actions you define. That means redux offers: Predictability. Reducers are pure functions — given the … Read more

Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)

by

It’s because the react-router context isn’t set in that component. Since its the <Router> component that sets the context you could use useHistory in a sub-component, but not in that one. Here is a very basic strategy for solving this issue: const AppWrapper = () => { return ( <Router> // Set context <App /> … Read more