How to write PureScript react components to replace JavaScript

Re:How to write PureScript react components to replace JavaS... by Cthulhu_ on Thursday June 25, 2020 @04:24AM (#23638200)

Pedantic and what always happens when someone posts code on the internet, but, I'd extract the onClick function and provide a default value for the onclick parameter for readability, and use cleverness to show off:

    export const Counter = ({label, counterType, onClick}) => {
        const [counter, setCounter] = useState(0);
        onClick = onClick || () => {};
        const handleClick = () => {
          const modifier = counterType === "Increment" ? 1 : -1;
          setCounter(counter + modifier);
          onClick();
        }
        return (
            <button onClick={handleClick}>
                {label}: {counter}
            </button>
        );
    }

There's another commenter that uses Typescript, but I believe PropTypes (https://www.npmjs.com/package/prop-types) are still viable as well - although it moves the checking from compile-time to runtime. I do believe VS Code and co can interpret PropTypes to provide in-editor hints though. And JSDoc as well.

[ Parent | on HN ]

Re:How to write PureScript react components to replace JavaS... by Softcadbury on Thursday June 25, 2020 @04:40AM (#23638312)

You should also use useCallback for handleClick

[ Parent | on HN ]

Re:How to write PureScript react components to replace JavaS... by acemarke on Thursday June 25, 2020 @11:38AM (#23641897)

Not in this example, no. There's zero benefit to memoizing a callback that's passed to a "leaf/host" element like a `<button`>

See my extensive post "A (Mostly) Complete Guide to React Rendering) for details:

https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-...

[ Parent | on HN ]

Re:How to write PureScript react components to replace JavaS... by johnrackles on Thursday June 25, 2020 @07:55AM (#23639580)

Can you explain why? I don't think I've ever used useCallback and certainly not for this type of functionality. I'd love to learn

[ Parent | on HN ]

Re:How to write PureScript react components to replace JavaS... by neolefty on Thursday June 25, 2020 @08:32AM (#23639898)

useCallback memoizes (caches) the function definition. Its main use is to simplify refreshes — since the function isn't redefined every time, components that depend on it such as the <button> can be re-rendered less often.

    const handleClick = useCallback(() => {
        const modifier = counterType === "Increment" ? 1 : -1
        setCounter(counter + modifier)
        onClick()
    }, [onClick, counter, counterType, modifier])

The array at the end is the list of "dependencies" — whenever one of them changes, the function is re-cached. Compiler checks can catch missing dependencies. You might think, "But that function will be redefined pretty much every time," and in this case that's true, and memoization may not help much. But in bigger trees of components, most redraws will be unrelated to any given element, so those dependencies will rarely change.

useCallback() (and its twin useMemo(), for non-functional values) gets more useful in deeper component trees, where values may be passed down several levels.

[ Parent | on HN ]

Re:How to write PureScript react components to replace JavaS... by untog on Thursday June 25, 2020 @09:09AM (#23640274)

I haven’t really dug into React since Hooks were announced and... wow. Am I reading correctly that you use useCallback to avoid redefining your callback function over and over again?

The surface level ergonomics of JSC and the VDOM are great but good lord does it look painful at a second glance. I’m glad I took svelte for a spin.

[ Parent | on HN ]