I only see examples of using useContext to pass values between parent and child components. I want to know if useContext can pass values between sibling components, which come from different files.
You can define context on parent component and then use it in its 2 childs respectively siblings.
You can also use Redux for this
Related
So to help me understand something. For further info I'm using Laravel as a backend language and Vuejs as frontend.
A user wants to visit a page to view a specific project that hits the show method on my controller. The show method loads all data pertaining to that project to display on the page. This show page is made up of many different view partials and inside some of those partials are different Vue Components that will display different sets of data pertaining to the project. Is it better to just pass all the data through props to the different Vue components that are needed or just pass in the whole project as a prop and then reference the properties of the project inside the component? Or should I pass the project Id and then have methods to fetch the specific data for that component with use of the project id.
I think that the three approaches you mention are perfectly valid. It depends on how you want to structure your components.
Do you want to use "dumb" or generic components that don't know about the structure of a "project"? Then your main component should pass relevant pieces of data to the children components.
Are children components specific to "projects" and not reusable anywhere else? Then passing the project reference around and each component getting the pieces of data they are interested in is also a good strategy.
I would probably avoid last option to avoid multiple server round trips, although it can be useful in case there is a specific part of a project that takes a lot of time to retrieve (for instance a list of sub-tasks). You could split the data fetches in two or three calls to make the main view render fast while the time-consuming query is still executing and populated when available.
If a component needs to render several times a second because of a prop change, should this component extend React.PureComponent?
The component has no child components, however, it is itself deeply nested... so the props are travelling through several other components.
In general, what are some key things to consider when deciding if React.PureComponent should be used or not. In which scenarios is it bad to use?
Yes this sounds like a good case for PureComponent because your component is unnecessarily being re-rendered frequently with the same props.
A child component extended from React.Component will call render every time its parent calls render. If instead the child component is extended from PureComponent it will only call render when the parent passes props that don't shallowEqual the previously passed props.
It's generally safe to use PureComponent as long as
your component and its children don't rely on context updates
your component doesn't have object or array props that are directly mutated by its parents (shallowEqual will not detect these changes)
Suppose I have the following nested UI-Router route:
/parent/{parentId}/child/{childId}
parent:child in my case is a one:many relation, therefore any valid childId implies a specific parentId. I'd like to maintain the nested state in my application, keeping access to parent resolve dependencies without reloading between sibling children; but instead represent the above with the terser URL:
/child/{childId}
Ideally, I'd like UI-Router to do as much of the lifting as possible, and only write the action to recover just the parent state when it is lost (for example when loading the entire page from a child route URL).
My responsibility could, for instance, be simply handling recovery of the parentId state parameter when it is null.
Is this feasible?
edits day 2: It seems, according to the docs, that UI-Router is designed to allow obscuring parent routes from the URL using Absolute Routes. I can only assume that it is supposed to preserve the parent state normally in this case. So, I tried a quick implementation by including two identical URLs, one an absolute URL that is a child state of the parent, and the other that is an actual root state, which does nothing but resolve the parent parameter, then load a controller to perform a redirect to the actual parent/child route. It had lots of problems. I'm trying to determine if I can do the same thing with an abstract state above the parent route. Anyway, suffice to say I haven't solved this yet.
Using angular 1.2 and ui-router 2.8
Was wondering if it was possible to inject data from either the resolve or $scope into a states custom data object. I know I can alter this data in a controller "$state.$current.data.key = value;" but this will not inherent to children.
I'm not sure about using the custom data the way you're asking - I haven't done that and I can't find an example of it in the docs.
You could define a resolve dependency on the parent, and the child will have access to it as long as it's injected as a dependency within the child as well. See this UI-Router wiki page for an example.
Is there any way in JSF 2.0/PrimeFaces of re-rendering all components (using the PrimeFaces update="id1 id2..." attribute or the <f:ajax render="..."/> tag) that have got a given ID, regardless of whether they are in the same form that contains the button triggering the AJAX re-render or not?
For example, I want my button to re-render all sections on a page that visualize the user's current shopping basket.
Right now, I always have to specify the absolute path to the components that I want to get updated, e.g.
update=":header:basket :left-sidebar:menu:basket"
which is rather impractical if the structure of the page changes (besides, I have not been able to figure out the correct path for one of these components). I already tried to implement a custom EL function like this, which traverses the component tree:
update="{utilBean.findAllComponentsMatchingId('basket')}"
but at the time that function is evaluated, apparently not the entire component tree has been set up as it doesn't contain the components I am looking for.
How can I deal with this? There certainly must be an easy way of doing AJAX-based updates of sections of the page that are not part of the current <h:form>?
Thanks!
What is the definition of your findAllComponentsMatchingId method? This btw doesn't look like a custom EL function call. Additionally "{}" is not an EL expression at all, but I take it that this is an typo.
Perhaps the problem is in the way your findAllComponentsMatchingId works and not that the components are not yet in the tree? It might be useful to look at the findComponentFor method in this RendererUtils class for some inspiration.
Alternatively you could try binding the components you want to be updated to a request scoped or view scoped Map.
E.g. define in faces-context.xml:
<managed-bean>
<managed-bean-name>updates</managed-bean-name>
<managed-bean-class>java.util.HashMap</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
Then bind your components to this:
<x:someComponent binding="#{updates['foo']}"
And then write an EL function that iterates over this updates map and returns a space separated list of all components client IDs (component.getClientId(FacesContext.getCurrentInstance())).
Since (I think) this is determined by the way UIComponent.findComponent(..) works, I'm afraid you are out of luck. The closest naming container is taken as a base for the search.
Anyway, inter-form rerenders should not be that common. And naming container structures should not change that often.