Joe Savona
2abd439b43
Adds an option to preserve existing memoization guarantees for values produced
with useMemo and useCallback. We still discard the calls to these hooks, but we
preserve the information that the value is frozen at that point in the program.
Because these values are produced solely within the useMemo/useCallback
callback, their mutation cannot have any interspersed hook calls. This means
that the values mutable range will never span a hook and end at the point of the
useMemo, ensuring that they are memoized at the same point.
The main things that can change (relative to the orignal code) are:
* Forget will infer a precise set of dependencies, ignoring the user-provided
values. In practice this should only occur if the original code had a lint
violation, which Forget would bail out on. So in practice this shouldn't happen
unless the code doesn't use the React linter.
* Forget may start the memoization block earlier than the developer did if other
values are mutated along with the value being produced. This can cause
memoization to fail, but only in situations where it would have failed
previously:
```javascript
const a = [];
useFoo();
const b = useMemo(() => {
const c = a;
c.push(1);
return c;
}, [a]);
```
In this example (sans Forget) the useMemo will invalidate on every render
because `a` will always be a new array and its listed as a dependency of the
useMemo. Forget would correctly determine that the memoization would have to
work as follows:
```javascript
let c;
if (...) {
const a = []
useFoo(); // OOPS we made a hook call conditional
const t0 = a;
t0.push(1);
c = t0;
...
} else {
c = $[...]
}
```
Because this is invalid, Forget would (later in the pipeline) strip out this
memoization block and (as with the original) leave `c` un-memoized.
In this same example, removing the hook would cause Forget to be able to memoize
a value that wasn't memoized before:
```javascript
const a = [];
const b = useMemo(() => {
const c = a;
c.push(1);
return c;
}, [a]);
```
This invalidates every render without Forget, but would memoize correctly with
Forget (it would expand the memoization block to include the declaration of
`a`).
React Forget
React Forget is an experimental Babel plugin to automatically memoize React Hooks and Components.
Development
# tsc --watch
$ yarn dev
# in another terminal window
$ yarn test --watch
Notes
An overview of the implementation can be found in the Architecture Overview.
This transform
- needs plugin-syntax-jsx as a dependency to inherit the syntax from.
- should be run before plugin-transform-react-jsx
- assume the enforcement of rules of hooks, i.e.
- only call hooks from React functions
- only call hooks at the top level
- https://www.npmjs.com/package/eslint-plugin-react-hooks
Scaffolding
- https://github.com/facebook/flow/tree/master/packages/babel-plugin-transform-flow-enums
- https://github.com/babel/babel/blob/main/packages/babel-plugin-transform-react-jsx/src/create-plugin.ts
Reference
Rust Development
First-Time Setup
- Install Rust using
rustup. See the guide at https://www.rust-lang.org/tools/install. - Install Visual Studio Code from https://code.visualstudio.com/. Note to Meta employees: install the stock version from that website, not the pre-installed version.
- Install the Rust Analyzer VSCode extension through the VSCode marketplace. See instructions at https://rust-analyzer.github.io/manual.html#vs-code.
- Install
cargo editwhich extends cargo with commands to manage dependencies. See https://github.com/killercup/cargo-edit#installation - Install
cargo instawhich extens cargo with a command to manage snapshots. See https://insta.rs/docs/cli/
Workspace Hygiene
Adding Dependencies
To add a dependency, add it to the top-level Cargo.toml
// Cargo.toml
[workspace.dependencies]
...
new_dep = { version = "x.y.z" }
...
Then reference it from your crate as follows:
// crates/forget_foo/Cargo.toml
[dependencies]
...
new_dep = { workspace = true }
...
Adding new crates
Rust's compilation strategy is largely based on parallelizing at the granularity of crates, so builds can be faster when projects have more but smaller crates. Where possible it helps to structure crates to minimize dependencies. For example, our various compiler passes depend on each other in the sense that they often must run in a certain order. However, they often don't need to call each other, so they can generally be split into crates of similar types of passes, so that those crates can compile in parallel.
As a rule of thumb, add crates at roughly the granularity of our existing top-level folds. If you have some one-off utility code that
doesn't fit neatly in a crate, add it to forget_utils rather than add a one-off crate for it.
Running Tests
Run all tests with the following from the root directory:
cargo test
The majority of our tests will (should) live in the forget_fixtures crate, which is a test-only crate that runs compilation end-to-end with snapshot
tests. To run just these tests use:
# quiet version
cargo test -p forget_fixtures
# without suppressing stdout/stderr output
cargo test -p forget_fixtures -- --nocapture
Another hint is that VSCode will show a "Run test" option if you hover over a test in the source code, this lets you run a single test easily. The command line will also give you the CLI command to run just that one test.
Updating Snapshots
The above tests make frequent use of snapshot tests. If snapshots do not match the tests will fail with a diff, if the new output is correct you can accept the changes with:
cargo insta accept
If this command fails, see the note in "first-time setup" about installing cargo insta.
CI Configuration
GitHub CI is configured in .github/workflows/rust.yml.