React Hooks

• useState
• useEffect
• useRef
• useMemo
• useCallback
• useContext

useState — ใช้ในการ create, update, state ของ variables ใน functional component

ตัวอย่าง

const [numVal, setNumVal] = useState(231);
const [strVal, setStrVal] = useState('ZII');
const [objVal, setObjValue] = useState({
   num: numVal,
   str: strVal,
 });

useEffect — ใช้สำหรับ take action ใน stage of component life cycle และ event ที่เกิดขึ้น

ตัวอย่าง

useEffect(() => {
  console.log(
    'useEffect with [numValue] will call every time while numVal changed',
    numVal,
  );
}, [numVal]);

หมายเหตุ stage จะมีการ update เมื่อค่า numVal มีการเปลี่ยนแปลง

useRef — return a mutable ref object (เข้าถึงองค์ประกอบ DOM) และค่าจะคงอยู่ตลอดการใช้งานของ component นั้น ๆ

ตัวอย่าง

const stringInput = useRef(null);
 
<TextInput
 ref={stringInput}
 onChangeText={(text) => setStrVal(text)}
 value={strVal}
 placeholder="Enter String"
 />
 
<TouchableOpacity onPress={() => stringInput.current.focus()}>
  <Text>Press To Focus Keyboard</Text>
</TouchableOpacity>

useMemo — หลีกเลี่ยงการ re-render ใน component ลูก (ทำงานก่อนการ render จะไม่มีการ render ซ้ำอีกและไม่จำเป็นต้องใช้ state มาช่วยในการ render)

ตัวอย่าง

import {useMemo} from 'react';
 
function UseMemoListItem({item}) {
   return (
     <View style={Styles.container}>
       <View style={Styles.elementsContainer}>
         <Text>{item.name}</Text>
       </View>
     </View>
   );
}
export default UseMemoListItem;
function UseMemoListItem({item, onChange, arrTechnology}) {
  return useMemo(() => {
    return (
      <View style={Styles.container}>
        <View style={Styles.elementsContainer}>
          <Text>{item.name}</Text>
          <Switch onValueChange={onChange} value={item.status} />
        </View>
        <View>
          <Text>{JSON.stringify(arrTechnology)}</Text>
        </View>
      </View>
    );
  }, [item.status]);
 }
 export default UseMemoListItem;

useCallback — ช่วยจดจำ action แทนที่จะสร้างฟังก์ชันแยกกันในแต่ละการเรนเดอร์

Example

const fn = useCallback(() => console.log("Hello"), [])
import {useState, useCallback} from 'react';
 
const onChangeSwitch = useCallback((index) => {
  let array = arrTechnology;
  let object = array[index];
  object.status = !object.status;
  array[index] = object;
  setArrTechnology([...array]);
}, []);

useContext — เป็นการจับ Context API ของ React มา simplify ให้ใช้งานได้กับ functional component เช่นเดียวกับ useState สำหรับ useContext นั้นก็เป็นอีก API หนึ่งของ React Hook (บางคนก็ตัดสินใจใช้ React Context แทน redux แล้วเพราะไม่ชอบ boilerplate ที่มากมายหลายขั้นตอนของ redux นั่นเอง)

Example

const counterContext = React.createContext()

function CounterProvider({ children }) {
  const [count, setCount] = useState(0)
  const plusOne = () => setCount(count + 1)
  return (
    <counterContext.Provider value={{ count, plusOne }}>
      {children}
    </counterContext.Provider>
  )
}

function App() {
  return (
    <CounterProvider>
      <Component1 />
      <Component2 />
    </CounterProvider>
  )
}

function Component1() {
  const { count, plusOne } = useContext(counterContext)

  return (
    <>
      <h1>{count}</h1>
      <button onClick={() => plusOne()}>+ 1</button>
    </>
  )
}

function Component2() {
  // ...
}