📰 This Week In Javascript

Here is a list of cool things I have been reading about this past week in the Javascript world. I will say a little bit about each below.

• Up To Speed: React Hooks
• Up To Speed: React Context
• Up TO Speed: Npm Scripts
• Cool Project: Ink
• Interesting Read: Overreacted
• Interesting Read: None Of My Projects Want To Be SPAs

🏃 Up To Speed: React Hooks

The release of React 16.8, introduces the concept of hooks. This post has a great section: what are hooks, which recommends resources for understanding hooks.

There is a large body of documentation which starts with Introducing Hooks. Links to other sections are available on that site.

🏅Things to know

1. Hooks are an experimental API looking to get early feedback from those in the community who are interested in shaping the future of React
2. Hooks make code reuse easier
3. They essentially deprecate the need for classes
4. Hooks allow you to reuse stateful logic without changing your component hierarchy
5. Hooks let you split one component into smaller functions based on what pieces are related (such as setting up a subscription or fetching data)
6. It works by expecting react to call useState in the same order every time
7. There are three main concepts to grasp (useState, useEffect, and useCustom)

I think the best part of the article is when Abramov (who is clearly the author based on writing style), implements react-redux in 10 lines of code:

// |-------------|
// V React-Redux V
function useReducer(reducer, initialState) {
  const [state, setState] = useState(initialState);

  function dispatch(action) {
    const nextState = reducer(state, action);
    setState(nextState);
  }

  return [state, dispatch];
}

// Usage
function Todos() {
  const [todos, dispatch] = useReducer(todosReducer, []);

  function handleAddClick(text) {
    dispatch({ type: 'add', text });
  }

  // ...
}

🙊The Gossip

Apparently Hooks are contentious within the React community.

This Dan Abramov Tweet discusses his stance which is an interesting read:
https://twitter.com/dan_abramov/status/1093694465917751298?s=21

Here is Dan's Take:

• Hooks have an ideological resistance
• React is described as OOP or FP terms, but neither captures React.
• FP does not describe local state.
• Class” model doesn’t explain pure-ish render, disawoving inheritance, lack of direct instantiation, and “receiving” props.

Of course they “know” which component they belong to! React knows it just like your language knows which variables belong to which function, and when to destroy them.

🕵 What's Next

1. usehooks - Provides a set of really neat recipes for using React Hooks. For example "Dark Mode: This hook handles all the stateful logic required to add a ☾ dark mode toggle to your website"
2. React Hooks Community Examples - Demos made using Hooks
3. React Hooks FAQ - Lots of really deep info on Hooks, I just could not handle it in the first reading
4. eslint-plugin-react-hooks - ensures you are following the Rules of Hooks

Try them out and see where my feelings stand on hooks.

🏃 Up To Speed: React Context

I took the time to learn more about React Context this week. I first heard about them in a React Training Workshop held by Michael Jackson

Michael Jackson is the author of react-router, which was one of the first external libraries to use contexts. In the workshop, Jackson alluded to being responsible for making context publicly available. I suppose, it does no harm to believe him.

He described stumbling upon contexts within the internals of the React source code. After approaching the team about it, they advised him against using the feature. The next day, there was a warning added to the context readme.md advising against the use of Contexts:

However, Jackson still used Contexts in react-router. react-router is one of the most depended on React component packages.

Regardless, giving a read through the Context doc is definitely not a waste of time.

😎 Cool Project: Ink

https://github.com/vadimdemedes/ink/tree/next

Ink renders React in the terminal. I looked for this a few years ago and it did not exist. As an avid terminal user, I am really excited to give it a try.

Interesting Read: Overreacted

Overreacted is Dan Abramov's Blog. He is the creator of Redux and now works on React. The guy is a genius, and a brilliant writer.

Check it out!

Interesting Read: None Of My Projects Want To Be SPAs

None Of My Projects Want To Be SPAs was an interesting read.

My favorite quote was: "What's more interesting is how many apps I'm seeing built as an SPA that really don’t need to be. Why does a website that orders food from restaurants need a Megabyte of javascript?" I feel like the article must be trolling, but not sure. Either way, its an interesting read.