Skip to content

Instantly share code, notes, and snippets.

@slikts
slikts / advanced-memo.md
Last active March 27, 2024 15:18
Advanced memoization and effects in React

nelabs.dev

Advanced memoization and effects in React

Memoization is a somewhat fraught topic in the React world, meaning that it's easy to go wrong with it, for example, by [making memo() do nothing][memo-pitfall] by passing in children to a component. The general advice is to avoid memoization until the profiler tells you to optimize, but not all use cases are general, and even in the general use case you can find tricky nuances.

Discussing this topic requires some groundwork about the technical terms, and I'm placing these in once place so that it's easy to skim and skip over:

  • Memoization means caching the output based on the input; in the case of functions, it means caching the return value based on the arguments.
  • Values and references are unfortunately overloaded terms that can refer to the low-level implementation details of assignments in a language like C++, for example, or to memory
@gaearon
gaearon / connect.js
Last active March 25, 2024 17:11
connect.js explained
// connect() is a function that injects Redux-related props into your component.
// You can inject data and callbacks that change that data by dispatching actions.
function connect(mapStateToProps, mapDispatchToProps) {
// It lets us inject component as the last step so people can use it as a decorator.
// Generally you don't need to worry about it.
return function (WrappedComponent) {
// It returns a component
return class extends React.Component {
render() {
return (
@gaearon
gaearon / prepack-gentle-intro-1.md
Last active February 13, 2024 14:30
A Gentle Introduction to Prepack, Part 1

Note:

When this guide is more complete, the plan is to move it into Prepack documentation.
For now I put it out as a gist to gather initial feedback.

A Gentle Introduction to Prepack (Part 1)

If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code:

  • Babel lets you use newer JavaScript language features, and outputs equivalent code that targets older JavaScript engines.
@zephraph
zephraph / clean_node_modules.sh
Last active June 13, 2023 13:53
A shell script to clean up all node_modules in projects that haven't been touched in a couple weeks.
#!/bin/bash
DAYS_SINCE_LAST_CHANGE=14 # If a project hasn't been touched in this long its node_modules will be deleted
SEARCH_PATH="./Git" # Update this to the path where your code is stored
TOTAL_BYTES_REMOVED=0
Mb=1000000
Kb=1000
node_modules=$(find $SEARCH_PATH -name "node_modules" -type d -prune)