Minor README changes

[gsimone]

I tried to make the README more new user friendly.

A couple of questions:

const multiplyCountAtom = create({
  write: ({ get, set }, multiplicator) => set(countAtom, get(countAtom) * multiplicator),
})

can this be written like

const multiplyCountAtom = create({
  write: ({ get, set }, multiplicator) => {
     set(countAtom, get(countAtom) * multiplicator)
 },
})

Or does it need the return value of set() ?

---

Same here, can it be rewritten with {} to make it less cryptic?

import { create } from 'jotai'
import countAtom from './countAtom.js'

const multiplyCountAtom = create({
  write: ({ get, set }, multiplicator) => {
     set(countAtom, get(countAtom) * multiplicator)
  }
})

function Controls() {
  const [, multiply] = useAtom(decrementCountAtom)
  return <button onClick={() => multiply(3)}>triple</button>
}

TLDR I would be careful with the short syntax for arrow functions because it can imply something that isn't necessary ( this is strictly related to the README )

[stephencorwin]

Same here, can it be rewritten with {} to make it less cryptic

In my opinion, arrow syntax makes it easier to read partially because it takes less space.
Given the example:

// easy to read
<button onClick={() => multiply(3)}>triple</button>

// more difficult to read
<button
  onClick={() => {
    multiply(3)
  }}
>
  triple
</button>

// most difficult to read
<button onClick={() => {multiply(3)}}>triple</button>

This becomes exaggerated when there are many properties on a component

// easy to read
<button
  onClick={() => multiply(3)}
  onContextMenu={() => multiply(3)}
  color="blue"
>
  triple
</button>

// more difficult to read
<button
  onClick={() => {multiply(3)}}
  onContextMenu={() => {multiply(3)}}
  color="blue"
>
  triple
</button>

// most difficult to read
<button
  onClick={() => {
    multiply(3)
  }}
  onContextMenu={() => {
    multiply(3)
  }}
  color="blue"
>
  triple
</button>

TLDR I would be careful with the short syntax for arrow functions because it can imply something that isn't necessary

While I understand the sentiment, I think that the readability advantages outweigh implications. In general, functions should be tolerant to arrow function implicit return.

One that is not tolerant which causes confusion is useEffect

// error
useEffect(() => multiply(3))

// success
useEffect(() => {
  multiply(3)
})

// success
useEffect(() => {
  multiply(3)
  // cleanup function
  return () => {}
})

This intolerance causes many bugs and in my opinion is frustrating to orchestrate because of it.

To sum it up

This topic is highly opinionated, but I think that generally speaking, we should be leveraging implicitly returned arrow functions because it nets less LOC which is one of the determining factors in how complex something is perceived to be.

// less perceived complexity
const myFunction = (a, b) => a + b

// more perceived complexity
function MyFunction(a, b) {
  return a + b
}

[gsimone]

I wouldn't use it for callbacks ( user is supposed to know what those do, and if they don't it's react's docs job ) or effects ( same )

EDIT: As you can see this is the case in the examples, I left the unambiguos calls in the short form (like onClick)

[dai-shi]

Thanks for the review and the change suggestion.

wrt set, it returns undefined and arrow functions are not necessary.
I understand the both opinions. Personally, () => { foo(); } is acceptable, but () => foo(); is often more used, I guess.

Merging this.

[dai-shi]

On second thought, I think I would change write to non-arrow. It doesn't suffer from readability unlike props in JSX. f149664