
Security News
Open Source CAI Framework Handles Pen Testing Tasks up to 3,600× Faster Than Humans
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
babel-plugin-react-persist
Advanced tools
A Babel plug-in that optimizes your React.Component's implementation by automatically detecting declarations that should persist between rendering phases and replacing them with useCallback()
and useMemo()
whenever necessary. This plug-in can also be used to solve excessive processing power caused by using anonymous callbacks provided to JSX element by making them non-anonymous. Note that this plug-in is experimental and shouldn't be used in production yet. Compatible with React 16.8-alpha and above (hooks support).
export default ({ data, sortComparator, filterPredicate, history }) => {
const transformedData = data.filter(filterPredicate).sort(sortComparator)
return (
<div>
<button className="back-btn" onClick={() => history.pop()} />
<ul className="data-list">
{transformedData.map(({ id, value }) => (
<li className="data-item" key={id} onClick={() => history.push(`data/${id}`)}>{value}</li>
))}
</ul>
</div>
)
}
let _anonymousFnComponent, _anonymousFnComponent2
export default ({ data, sortComparator, filterPredicate, history }) => {
const transformedData = React.useMemo(() =>
data.filter(filterPredicate).sort(sortComparator)
, [data, data.filter, filterPredicate, sortComparator])
return React.createElement(_anonymousFnComponent2 = _anonymousFnComponent2 || (() => {
const _onClick2 = React.useCallback(() => history.pop(), [history, history.pop])
return (
<div>
<button className="back-btn" onClick={_onClick2} />
<ul className="data-list">
{transformedData.map(({ id, value }) =>
React.createElement(_anonymousFnComponent = _anonymousFnComponent || (() => {
const _onClick = React.useCallback(() =>
history.push(`data/${id}`)
, [history, history.push, id])
return (
<li className="data-item" key={id} onClick={_onClick}>
{value}
</li>
)
}), { key: id })
)}
</ul>
</div>
)
}), null)
}
babel-plugin-react-persist
is installable via NPM (or Yarn):
$ npm install babel-plugin-react-persist
Add to .babelrc
under plugins
and be sure to load it before any JSX transformation related plug-ins.
{
"presets": ["@babel/preset-react"],
"plugins": ["babel-plugin-react-persist"]
}
MIT. If you're including this in a repo above 1k stars I would really appreciate it if you could contact me first.
FAQs
Automatically useCallback() and useMemo()
The npm package babel-plugin-react-persist receives a total of 20 weekly downloads. As such, babel-plugin-react-persist popularity was classified as not popular.
We found that babel-plugin-react-persist demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
Security News
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.