React: detect when all children components have been loaded - javascript

I'm doing an implementation in which I need to detect when all children components have been loaded, from a multi-level hierarchy.
Example: MAIN component have a WORKSPACE component, which can have multiple COLUMN components and each COLUMN can have multiple WIDGET components.
Each widget is rendered after ajax calls (have to fetch some data in the server).
I need to detect when all WIDGETs components have been loaded (after async calls) in MAIN component.
I do not know which is the best approach/pattern to do this.
I know I can use some callbacks in each component to tell the parent that the component is loaded and then do this recursively, but I'm looking for a solution that solves this without having to deal with each level of the hierarchy.
Is it possible?

Related

React rendering with top level changes

Most places suggest showing spinners or global modals at the top-level inside app component. Regardless of how we manage them, this would mean state change in the top-level component, which would then rerender and then all the children will re-render. Isint this more expensive than say just rendering the modal or spinner inside the component which needs it? even if it means repeating code. I mean we can live with some code repitition as long as we dont have to rerender our whole component tree. Maybe i am not very experienced with react and missing somehting fundamental here
In my opinion it just depends on the context. If you're loading the data that affect the whole app (auth info, feature flags etc.) the loader should be on the top level (since the whole app should actually refresh after the data loads).
On the other hand, you can add the loader modal side by side with the root of the actual component tree, so that it doesn't cause the whole view to rerender, it's all up to the design/requirements.

Testing DOM updates in React

In a React component I am using an external library that creates complex components that I modify slightly on render. Thus, in my own component, I use things like element queries and mutation observers to get rendered elements in the DOM and dynamically add my own modifications, depending on the state of the DOM itself (not the external component, since I cannot access its state).
This works great, but I have not been able to figure out how to test this functionality [in Jest]. In particular, I add mutation listeners that add my own small React components based on the HTML that the external component renders, adding a button when the mouse hovers over a list of dynamically-created elements. When I attempt to test this in Jest, none of this logic is performed, and the functionality I have added cannot be tested, as the changes to the DOM do not appear, even with full rendering. In particular, during testing I have found that the queries I am using in the component do not have any values, as they need the external component to fully render the HTML for my own component to observe the changes.
I need a way to test my component in a way such that the external component is rendered, but such that my own component can perform updates afterwards, when its own state changes.
How can I test the functionality of the updates that I perform that are based on element queries if there are not any results to these queries during testing?

Angular 6 - Nested Components inside Custom Modal Window

I followed this post to create a custom modal. Everything works as supposed except putting other Angular components inside the <div class="modal-body">.
The template and CSS of the inserted components loads but the javascript just doesn't work.
How is it possible to insert working Angular components into such a dialog?
for all the dynamically called components( those components which we are not mentioned in the template by the template selector) should be added to the entry components. If we do that Angular will instantiate the component for us.
The best practice is to mention the components in the component declarations and if there is any dynamically created components, add them into entry components. Everytime we add components to entry components it cost us the performance. try to reduced the entry components :). Hope I answered your query.

How to update Parent Component data from Child Component without two way data binding in angular 1.5.x?

Sorry if it's a silly question but i am a noob in angular 1.5.x
I am using es6 class based components with one way data bindings throughout the app(best practices as far as i know).
I have a Container Component.
It has a Sidebar Component and a Content Component.
I fetch the menu options (array or object) in Container Component and pass it to Sidebar Component and Content Component using one way data binding as attributes.
I want to update the Container Component whenever i change menu options in Sidebar Component or Content Component and it should be reflected in both the child components.
I don't seem to find a way ( without two way data binding ) to do it in angular 1.5 without using $scope events or Service.

Collect data from child components

For my first React app I need to display a menu hiearchy with group-items, read-items and write-items (there are more, but that's enough for this example).
Each read-item and write-item are connected to a data point in a JSON API: each item has a resource (for example /api/1.0/fruits) and a json-path (for example data.color).
When the menu is displayed all values should be fetched from the web service. But I don't want each item to fetch its value independently because then the same resource would be read multiple times in the typical case.
I have a static, stateless menu structure as well that the views are built from. I can call a method, getRequiredResources(), on the root menu item in this menu structure which will return a set of resources.
But then I've introduced dynamic menu items, so that depending on the state of the menu items different resources are required. I can no longer use the static menu structure to collect all required resources, since it has no knowledge about the state of each item.
Any hints on how to handle this? If I could access the child menu item components they hold enough state to return a list of required resources, but I don't think that's a recommended pattern...?
I use a Flux architecture for data flow.
It is good practice to maintain state as high as possible in the component tree. Best solution in your case depends on the source of the dynamic conditions of the menu structure:
If these dynamic conditions originate from the outside world (e.g. whether or not user is logged in):
Put state inside the top menu component, including all the information about the condition of its child components.
Then the top component could still fetch all data, and render the dynamic menu.
This maintains your requirement to fetch menu data only once.
For this you to maintain info about the condition of menu somewhere in a store, to pass on to top component.
If the dynamic conditions originate from within the menu item (e.g. a checkbox or filter for subitems inside the menu)
Give the child components state, and have each child fetch their own stuff based on that state. (Start with loading state, fetch items, and re-render).
In that case, you may be fetching same data twice (since children do not communicate with each other.
If the dynamic conditions originate from within the menu components and your dataset is not overly large or complex (sounds like this doesn't fit your needs):
you could still fetch everything at the top, and use state inside the children only for filtering purposes.
If dynamic conditions originate from within the menu, but you want to save the state somewhere (e.g. for when user revisits page):
then keep state in top component, as well as all dynamic children conditions.
Children are all stateless, everthing is passed as props.
Whenever inside a child a filter or similar is set, that child fires an action to the dispatcher. You then need to save your filter conditions also somewhere in a store.

Categories

Resources