So I have a page (let's call it Page1) that use is loaded dynamically via React.lazy that uses several reusable components and another page (Page2) that uses some of those reusable components, this page being as well loaded dynamically.
My question would be, is there a way to prevent Page2 to load those reusable components again?
When I analyze the generated final bundle I see that both pages load the reusable components individually and I think ideally would be to just load them once and each new dynamically loaded page that uses those reusable components shouldn't fetch them again.
Reusable components as like simple components act as individual distinctive when used in different code files. so they will surely re-render again when used in other files.
Related
I'm wondering if it's possible to use nested routes inside of a Gatsby layout component? I know that the react reach router supports this, but I'm not quite sure how to get it working within Gatsby...
Currently I have a layout component that contains my site header and side navigation menu. Each page loads within the body of the layout correctly.
I'm trying to now create a tabbed interface within one of my MDX pages.
Is it possible to use a nested router, nested layout component, or any other mechanism to avoid reloading the whole body content (including the tabs) when changing pages?
I'm hoping that I can define sub-pages as MDX as well, and reference those as content to load for each of the tabs without reloading my main layout component, or current surrounding page content. Just curious if this is possible or if I should try to pursue a different approach.
Current layout hierarchy
<Root>
/* AppLayout is static around ALL pages and contains header, navigation, and footer */
<AppLayout>
/* PageLayout is the wrapper around each MDX page content (which I want to contain the tabs) */
<PageLayout>
{MDX page content}
</PageLayout>
</AppLayout>
</Root>
Currently, <PageLayout> re-renders when I navigate to other pages (even when using <Link> component), <AppLayout> does not. This does make sense to me because each page is supposed to replace the content of <AppLayout>, but I'm curious if there is a way to either restructure this or use a different mechanism to achieve it.
I'm hoping to have <PageLayout> contain tabs within its content, but not have the rest of the content within that specific page re-render when switching tabs.
As far as I know, it should work no matter if you use Gatsby or a standalone reach-router implementation because Gatsby's routing extends from React reach-routing, adding some enhancements. According to their documentation:
The component is a wrapper around #reach/router’s Link component that
adds useful enhancements specific to Gatsby. All props are passed
through to #reach/router’s Link component.
Gatsby’s <Link> component enables linking to internal pages within a preloading, prefetching resources so that they are fetched by the time the user navigates with this component. We use an IntersectionObserver to fetch a low-priority request when the Link is in the viewport and then use an onMouseOver event to trigger a high-priority request when it is likely that a user will navigate to the requested resource
We will be doing our first project using React.
It will not be a Single Page App, but a Multiple Page App.
What I'm trying to figure out at the moment is : what's the difference between a component and an app.
If I only use components, can I still use Redux to have some state management on the current page ? Or do I need an app for this ?
Thanks for the information you can bring !
THoma
There is no special object called "React App". React Components build an "React App" by coming together.
But React Components are formed like tree structure. That means each component have a parent component so you can create a React Component that named "App" and can put another components inside it.
You don't need redux for state management in React Components.
I hope the answers have helped.
Your app may contains a single component and still it will be a react App. If you are using multiple components in a page you can still use react-redux. Redux is basically a container for your states and let suppose you need some state from one component to be consumed in another, Redux provide you a mechanism to make the communication efficient and predictable.
You can also look at the React Context APIs as an alternate to Redux.
An app is simply a component that holds the root of the work you are trying to do. For example an App may have the navigation menu, testimonials, adverts, content, login avitar etc.
If you are making a single App per page (For example a testimonial) then you would still have a SPA. For example, adding testimonials, searching, editing.
You should only use Redux if you are using a SPA with lots of different parts with data in common. If you are making a one-app-per-page and there is no cross over in data then you can simply using Reacts State/Props to hold your data.
Redux is good, but it forces you into a complex path your should try to avoid. If you find yourself wanting data from different domains (customers address and a list of testimonials) then you should use Redux.
If this is a new applications (green) then I strongly recommend you build the whole thing within a SPA using React-Router to control components. you can use frameworks like Next.JS to ensure the site remains small in size (dynamically loading script only when required).
Since React became the hottest thing, I've been using it - but my experience with it has been one in which the dev architect implements the pages in the following way. So, given what I show below, I am curious if people are over using React.
Basically one html page, and insert 'divs' into the page, normal html.. then our "insertion" page has a bunch of renderDOM's to insert your "new component" into a HTML page that is litered with div id's etc.. But there is literally no content that is NOT derived from react components.
Single page app, in which every single ui/view item is a react component. As above, there is no content derived that is not from a react component.
Both of these approaches I've used, the whole page is just a giant react component.. one (#1) has a bunch of divs with ids for renderDOM's, and the other (#2) the whole page and every subsequent page is all react components.
I am curious if this approach degrades and is not scaleable over time because there is literally no rendered HTML outside of our BUILD process... meaning, it is just one giant javascript file.
I could be wrong, but something tells me that the skeleton of the pages should still be HTML, and only those sections of the page that need dynamism should be react components.
Your thoughts? Your implementations?
I have done any isomorphic implementations.
We are currently moving an application from asp.Net to React/Redux and .Net core. The application is really complex so we are trying to make so that each page its is own module. But there certain components (Modals, PDF viewers, and other specialized viewers) we need to access throughout the application. Is there a way to add these components from other React projects in a specific application without having to load the entire application. Or maybe create a core React/Redux library that goes in the entire application?
Thanks
Note: we are currently using Webpack, ES6, React and Redux
As a sibling to your modules directory, you may have a shared directory. Inside here, usually, you'll have directories like styles/, fonts/, images/, and ... components/. The components here may be thought of as the atomic structures that create your "molecular" modules. For example, any custom UI components (e.g., buttons, dropdowns, tooltips) go here--assuming you're opting out of MaterialUI.
Then from within your larger "feature" components, you import these components and use them.
As a further step, you can build all your shared components as a private npm module and bring it in that way.
Since Redux is in the discussion, aim to make your routed components be container components. In other words, in <Route path='/something' component={ThisComponent} />, ThisComponent ought to be a generated container component, via the connect()() method.
I would advise against using a Router as your application could easily break should the .net application change urls.
Another option would be to use something like React Habitat
I am new to ReactJs and I am not sure where and how should I define Layout for components. Specifically I want my SideBar Header and Footer remain sticky and using react-router-dom I want to mount rest of the components at appropriate places whenever needed (click on sidebar item)? So should I render multiple components together or there is a another way to first define the layout and then render components at predefined places ?
For dynamic components, use css to lay them out on different pages and render them at once by calling them under render of that main big component. This would make could modular and non-redundant too.
Refer this github , I found it good for referral.
https://github.com/airbnb/react-sketchapp
For the quick layouts you can use bootstrap templates. ( This can help you get started)
https://getbootstrap.com/docs/4.0/examples/