
Research
PyPI Package Disguised as Instagram Growth Tool Harvests User Credentials
A deceptive PyPI package posing as an Instagram growth tool collects user credentials and sends them to third-party bot services.
react-with-stable
Advanced tools
This package provides stable inline callbacks when passing props.
Please ⭐ star this repo if it's useful!
import { withStable, depFn } from "react-with-stable";
const Event = withStable(["onClick"], ({ onClick }) => (
<button onClick={onClick}>click</button>
));
const Render = withStable([], ({ render }) => {
useEffect(() => {
console.log(render());
}, [render]);
return <div>{render()}</button>;
});
export default function App() {
const [text, setText] = React.useState("a");
const [other, setOther] = React.useState("a");
return (
<div>
<Event onClick={() => alert(`click: ${text}`)}/>
<Render render={depFn(() => `render: ${text}`, [text])}/>
</div>
);
}
Event
componentNo matter how text
state changes, the Event
component never re-renders because onClick
is declared as a stable prop.
But when onClick
fires as an event handler, it will get the latest text
value.
Note: don't use onClick
in effects or rendering.
Render
componentWhen other
changes but text
doesn't change, the Render
component never re-renders because its props render
callback is wrapped by depFn
with the dependencies which is text
.
You can think depFn
as inline useCallback
that provide memo callback if the dependencies are the same.
Please check this codesandbox example. It proves that the withStable
wrapped components never re-render unless
This package basically does the same thing as useEventHandler
like many community implementaion and useEvent
RFC the React team is working on. The difference is that it wraps callbacks in HOC, so it can provide stable identity for inline callback where hook methods can't achieve it.
You have to explicitly provide stable prop keys in the first parameter of withStable
like withStable(["onClick"],
. This is actually better in concept in most scenario because it should be the callback consumer (i.e. Event
component) to know this prop (onClick
) is stable and only used in events.
For depFn
usage, just consider it as inline useCallback
, and list all values used in the callback to the second parameter.
FAQs
React withStable HOC
We found that react-with-stable 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.
Research
A deceptive PyPI package posing as an Instagram growth tool collects user credentials and sends them to third-party bot services.
Product
Socket now supports pylock.toml, enabling secure, reproducible Python builds with advanced scanning and full alignment with PEP 751's new standard.
Security News
Research
Socket uncovered two npm packages that register hidden HTTP endpoints to delete all files on command.