react-hooks not work

[ltvtk]

I test simple useState, assign to label and change in button but it's not work

   const [count, setCount] = useState(10)
 <label> {count}</label>
   <button
            onTap={(event) => {
                    console.log("PRESS")
                    setCount(count+1)
                }}
      >Inc</button>

[shirakaba]

They used to work – but indeed, I think I may have encountered this, too. Are you using an Apple Silicon computer?

Which version of React is installed? I need to know what versions are specified in:

• your package.json;
• your package-lock.json;
• and also your node_modules/react/package.json.

Thanks.

[ltvtk]

Hi, I use newest template and your AppContainer example, run on iPhone 6S (iOS14) device from macbook. I log count and it value change, problem is UI not update state. https://gist.github.com/ltvtk/893b06b1eb0288b434df9285cdf256d9

[shirakaba]

@ltvtk Sorry for the delay – it's been a busy week.

export function ClockFC(){
    const [date, setDate] = useState(new Date());

    useEffect(() => {
        const interval = setInterval(() => {
            setDate(new Date());
        }, 1000);

        return () => {
            clearInterval(interval);
        };
    }, []);

    return <textView>{date.toLocaleTimeString()}</textView>;
}

I've tested this just now and it's fully working on macOS, on an iOS 14.3 simulator, using react-nativescript@2.2.0. The ClockFC component updates every second as expected.

I'll try running your example next.

[shirakaba]

@ltvtk I can get a working Counter component, too – I did have to change the code from your provided code, however. Please try something like this instead:

export function Counter(){
    const [count, setCount] = useState(0);

    return (
        <>
            <label>{count}</label>
            <button
                onTap={(eventData) => {
                    /**
                     * The useState() hook can take a callback (just like the setState() API
                     * of Class components) which allows you to do a state update based on the
                     * current state value. This is recommended practice in React.
                     * @see https://reactjs.org/docs/hooks-reference.html#functional-updates
                     */
                    setCount((currentCount: number) => {
                        const nextCount = currentCount + 1;
                        console.log(`Increasing count from ${currentCount} -> ${nextCount}`);

                        return nextCount;
                    });
                }}
            >
                Increment
            </button>
        </>
    );
}

Can you try that and see if it works? Also, are you using an Intel Macbook or an ARM Macbook?

[ltvtk]

Thank you for your work! I try something with your repo and new project today I realize the reason -When mix state with text together in children it will not work:

<label> {count} </label> //work, 
   <label> someText {count} </label> //Not update in label and button

I try to use the text prop and everything work well both in new project and in your testComponent/statefull.tsx file -Final corrected Counter.jsx code like this Hooray! Congrats your interesting project.

import * as React from "react";
import { useState } from "react";

export function Counter(){
    const [count, setCount] = useState(0);

    return (
    <flexboxLayout  flexDirection="column" backgroundColor="#3c495e">
        <label 
            color="green"
            text = {`Count ${count}`}
            fontSize={100}
        />
        <button
            text={`Inc++ ${count}`}
            onTap={() => setCount(count + 1)}
            color="white"
            fontSize={30}
        />

    </flexboxLayout>
    );
}