I am new in react-hook-form, and my question, that when I wrap my whole application with FormProvider can I access the state like the react context API, or the redux provider or this component is just for inject the useform methods into the context for calling everywhere?
My case is that I have a react-native application. I wrapped my app into the FormProvider in the App.tsx. I have a form screen where I have to add some data from another screen (react-native-screens). So I tried to call getValues and setValue on the new screen but I get undefined as a result of the getValues method.
Should I create custom react context with useEffect to update the form state or there is chance to solve this with useFormContext hook?
Hello first you don't need react-hook-form as a global state supplier . use redux it's much simpler as to your appProvider you simply import Provider from 'react-redux' then pass the store as a prop then configure your store to take injectable states from future containers . react-hook-forms main roll is meant to handle forms : check their usage https://react-hook-form.com . i use it mainly in authentification containers to control the flow of data that is to be sent to the main store. . i hope this answer gives you some clarity .
If I understood correctly ,in order to accessing your states anywhere in functional components by redux you are able to use useSelector for getting data and useDispatch for dispatching data. Also in the react context you capable of to creating your custom hook for easier accessing to your states by useContext or directly use that and for setting your states you can use useReducer (better way) or set in the context.
React hooks
Redux hooks
Related
I am making a React Native app and I need the user data (fetched from firebase database) to be available right after the first screen and in many other screens.
As it is complete user object data, I do not think passing it via the navigator props is suitable. So I am searching for alternatives.
Can someone help ?
The best way to store and share global data is Context API or Global Context .
This new API solves one major problem–prop drilling. Prop drilling is the processing of getting data from component A to component Z by passing it through multiple layers of intermediary React components. The component will receive props indirectly . Context provides a way to pass data through the component tree without having to pass props down manually at every level.
To create a context, we use React.createContext which creates a context object. You can pass in anything as an argument to React.createContext.
import React from "react";
const YourContext = React.createContext("value");
To make this context available to all our React components, we have to use a Provider.
Every context object comes with a Provider React component that allows consuming components to subscribe to context changes. It is the provider that allows the context to be consumed by other components.
In order to create a provider, we have to import our Context.
No practical purpose to this question, just tryna connect concepts to get my head around switching from Redux to using useReducer and React contexts - is a Context when used with useReducer` basically a redux store that's only available to components that explicitly import it?
No. Context and Redux are very different tools that solve very different problems.
Context is simply a mechanism to make a single value accessible to a portion of your component tree. It's up to you to write the code that determines what that value is and how it gets updated. This is typically done by storing data in React component state, and creating a value that is passed to a <MyContext.Provider>.
Redux is a separate UI-agnostic state management library that is designed to help you write predictable state update logic and track when, where, why, and how your state has updated over time, with the React-Redux UI bindings layer allowing your React components to interact with that Redux store.
Now, yes, useReducer+useContext do have some similarities to Redux in terms of how your component will interact with them, but they also have very different performance characteristics in terms of when and why your components will re-render.
Please see my extensive post on A (Mostly) Complete Guide to React Rendering Behavior and my additional posts Redux - Not Dead Yet! and React, Redux, and Context Behavior for details on how Redux and Context differ and how
It is not hard to implement the exact logic of react-redux by means of useContext, useReducer and maybe useSelector)
But useContext + useReducer is not a full replacement of Redux.
useReducer is just an alternative to useState.
And useContext comes with https://en.reactjs.org/docs/context.html#caveats
To store multiple values you have to https://en.reactjs.org/docs/context.html#consuming-multiple-contexts
I'm trying to differentiate different redux state changes and saw this github solution: Redux-watch In order to the watch function you're supposed to provide the redux store which can't figure out how to do. I'm passing the store down to this component through a provider for reference.
If you need access to the store state in a component, you should be using the useSelector hook or the connect higher-order component. Don't try to set up store subscriptions yourself in components - React-Redux does that for you already.
I am experiencing some serious fatigue when I tried wiring up redux with react router vs mobx with react router. I also tried to wire up a top level state with router's render func, but since router do not refresh, that method will fail. My state management requirement is rather simple and I am feeling redux or mobx are overkill. All I really need is a top-level state provider that acts as if just like any other component level state and use callback a way to manipulate it.
Been googling and looking at different solutions for the whole morning, however, I can't find a readily available solution with default react state that can work with react router (v4).
Is there a solution avaible? or its really something not possible to do when it comes to state with react router?
How did you setup Mobx? Maybe you're overthinking it. You can setup a top-level observable object that pretty much mimics the standard component state, but with all benefits of reactive programming.
If you use the <Provider> wrapper component from the mobx-react package that store becomes accessible to all your child components using #inject. In combination with #observer any component that depends on your store will update when you change it.
Check out this code sandbox example I created to showcase this for you:
https://codesandbox.io/s/jzv73o97r5
you can try it with react router v6 it has some optimistic approach to do so
I have a react native project and I am using redux actions and reducers to handle my store.
I have a smart connected component and I call my actions through dispatch in componentWillMount() and then I have mapStateToProps and I map the data I get from my store to props.
Problem is the only way to check if the props are changed, is by putting it inside render function. In my case I want to navigate to another page if I get props filled with some data. It all works fine but I get warning from React that its anti pattern. Is there any other way of doing this? Am I doing it right?
You should implement the method componentWillReceiveProps instead of comparing the values in the render
Another (preferable) approach would be the action responsible to update the values, do the navigation (or dispatch another actions that would do the navigation stuff). Check redux-thunk