Skip to content

Instantly share code, notes, and snippets.

Avatar
✌️

Rauno Freiberg raunofreiberg

✌️
View GitHub Profile
@gaearon
gaearon / connect.js
Last active Oct 20, 2020
connect.js explained
View connect.js
// 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 Sep 2, 2020
A Gentle Introduction to Prepack, Part 1
View prepack-gentle-intro-1.md

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 Apr 1, 2020
A shell script to clean up all node_modules in projects that haven't been touched in a couple weeks.
View clean_node_modules.sh
#!/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)
@slikts
slikts / advanced-memo.md
Last active Oct 26, 2020
Advanced memoization and effects in React
View advanced-memo.md

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
You can’t perform that action at this time.