useMemo isn’t free $

useMemo comes with a small cost. So we should understand when it’s a benefit, and when it doesn’t provide any value.

• Small usage in RAM to memoize & remember the resulting value
• It costs a small cpu cycle to loop over & compare the dependency array & run internal fn of useMemo

So we should be smart when we use it.

useMemo isn’t always needed

useMemo isn’t needed in certain cases. For example, casting something to Boolean, or doing simple math isn’t an expensive operation and returns a primitive like “boolean” or “number”. These value will always be the same every time they are re-render run 

true === true and 5 === 5.

Conversely, an array or object don’t have equality,

 [] !== [] and {} !== {} and new Date !== new Date.

Two tests of if you need useMemo

1. Is the calculation to get the value is complex (looping, calculating, initializing a class)?
   • Or is it cheap (comparisons of numbers, boolean, casting types, simple math)
2. Is the returning complex value (object, array, fn, or class)?
   • Or is it a primitive value that is simple to compare (number, boolean, string, null, undefined)

Examples

  const date = useMemo(() => Date.parse(isoDateString), [isoDateString]);

  const isAdmin = useMemo(() => runExpensiveSearch(accounts), [accounts]

-  const isArchived = useMemo(() => Boolean(process?.deletedAt), [process?.deletedAt]);
+  const isArchived = Boolean(process?.deletedAt);

-  const numberOfAccounts = useMemo(() => accounts.length, [accounts]);
+  const numberOfAccounts = accounts.length;

The post When do you need useMemo (and when don’t you) appeared first on Thoughts.

You can click on this error in the browser to jump directly to the line of code inside your editor! But how do you setup VSCode with REACT_EDITOR?

Console error:

Could not open SomeFile.js in the editor.
To set up the editor integration, add something like REACT_EDITOR=atom to the .env.local file in your project folder and restart the development server. Learn more: https://goo.gl/MMTaZt

Setup your editor to be open from terminal

Google “How to open [your editor] from terminal” to find instructions for your editor.

For VSCode, open the command pallet ( Command Key + P ) and type > shell to install “code” into your PATH environment variables.

You should now be able to open terminal and type code to open VSCode. Pretty nifty!

Setup your React Project to know which editor to open

Create a new file (or edit the existing) .env.local file.

setup VSCode with REACT_EDITOR this will be REACT_EDITOR=code and for other editors set it to the command you found to open your editor from the terminal.

Credit to this StackOverflow Answer.

Related post: Favorite Sublime 3 Packages

(cover photo credit: Jonathan Stassen / JStassen Photography)

The post setup VSCode with REACT_EDITOR (or any editor) appeared first on Thoughts.

Video Series: https://egghead.io/courses/getting-started-with-redux

Terms & Descriptions

The core of everything is the Store, Action, and Dispatch. In its simplest form it’s all you technically need. From there Thunks & Sagas enhance the the tooling around the Dispatching of Actions.

Store

• A singleton object/state for the app.

Action

• A payload describing what data you want to update in the store.
• They have a standardized structure.
  • We use this pattern: https://github.com/redux-utilities/flux-standard-action

Dispatch

• You “Dispatch an Action to the Store” to update the store.
• Dispatch sends the Action payload through the Reducer.

Reducer

• Receives the Action payload from Dispatch and modifies the Store.
• Reducers contain no business logic, they only modify the Store described in the Action

Thunk

• Considered the old way, but sometimes still has great applications in simple cases.
• You can “Dispatch a Thunk to either access state or do ajax work”
• Within a thunk you can call additional Dispatch
• Within a thunk you can access the state of the store.
  • Good for conditionally firing subsequent api calls, or dispatches.
  • Good for pulling together data from the store into a dispatch.
• Good for very simple ajax calls, you can Dispatch Actions from ajax response
• Best way to understand Thunks in my opinion is to look at the 10 lines of source code:
  • https://github.com/reduxjs/redux-thunk/blob/master/src/index.js

Saga

• Regarded as a better replacement for Thunks
• Can require more effort than Thunks to understand, and build.
• Within a Saga you can access the state of the store.
  • Great for conditionally firing subsequent api calls, or dispatches.
  • Great for pulling together data from the store into a dispatch.
• Sagas can subscribe to listen and fire when some Actions have been Dispatched
• Great for moving side effects to be self contained instead of sprinkled throughout the app
• Provides great debounce / cancel / takelatest logic nearly for free.
• Can do long running / scheduled Actions
• https://redux-saga.js.org/docs/introduction/BeginnerTutorial.html

(cover photo credit: Jonathan Stassen / JStassen Photography)

The post An Introduction to Redux appeared first on Thoughts.

There are many causes for “statePropsPrecalculationError”, for debugging see my post on Debugging React statePropsPrecalculationError post.

When you specifically have ” ‘state’ of undefined” the fix is simple:

Recently I ran into “statePropsPrecalculationError” alongside with the the console warning TypeError: Cannot read property ‘state’ of undefined(…)`.

This is super easy to fix, but not immediately obvious. Whenever you use `this.setState()` inside your component, you must define your initial state!

Just add a `getInitialState()` definition!


const MyComponent = React.createClass({
getInitialState() {
return {
isOpen: false
};
},
toggleOpen() {
this.setState({isOpen: !this.state.isOpen});
},
render() {
return (

);
}
});

The post React “stateProps PrecalculationError” and TypeError ‘state’ of undefined appeared first on Thoughts.