Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
react-lazy-mount
Advanced tools
Lazily mount react components to render after an initial condition is met.
npm install --save react-lazy-mount
or
yarn add react-lazy-mount
Sometimes you don't want to load something until an initial condition is met. If you have an expensive component that is making api calls, or is rendering lots of children, initial and frequent mounting can hinder performance. LazyMount
can help improve performance by mounting components based on an initial condition. It's like lazy loading, but instead of waiting for an initial render to load the module, it is waiting for an initial truthy conditional in order to render JSX.
import React from 'react';
import LazyMount from 'react-lazy-mount';
export const Example = () => {
const [state, setState] = useState(false);
return (
// once trigger prop becomes "true" for the first time,
// the children props are mounted and will stay mounted
// regardless of state changes.
<LazyMount trigger={state} >
<div >I'm mounted</div>
</LazyMount>
);
};
In the above example, <div >I'm mounted</div>
is only rendered after the state becomes true for the first time. If the state becomes false, LazyMount
will still render the children. It waits for the first true
value of the trigger, and then mounts the children.
import React from 'react';
import LazyMount from 'react-lazy-mount';
const MyComponent = React.lazy(() => import('./MyComponent'));
export const Example = () => {
const [state, setState] = useState(false);
return (
// once trigger prop becomes "true" for the first time,
// mycomponent will be lazy loaded, then mounted
<LazyMount trigger={state} >
// I'm optional
<Suspense fallback={...} >
<MyComponent />
</Suspense>
</LazyMount>
);
};
Lazy mounting can be coupled with lazy loading to wait for a condition to be met in order to both load the module and render the component.
Props | Type | Default Value | Description |
---|---|---|---|
trigger | Boolean | false | Trigger that listens for the first truthy value to render the children prop |
children | ReactNode[] | Component(s) that will be mounted once the trigger becomes true for the first time, and stay mounted regardless of any future trigger changes. |
MIT © BenBrewerBowman
This hook is created using create-react-hook.
FAQs
Lazy mount react components once a certain condition is met.
The npm package react-lazy-mount receives a total of 0 weekly downloads. As such, react-lazy-mount popularity was classified as not popular.
We found that react-lazy-mount demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.