React Native
What is hook?
Hooks are functions that we can hook into state and lifecycle features in function
components
Built in Hooks
List of Hooks
- useState
- useEffect
- useMemo
- useCallback
- useRef
- useForwardRef
- useLayoutEffect
- useReducer
- useContext
useState
useState declares a state variable that we can update directly.
import React from "react";
import { View, Text } from "react-native";
import { Button } from "react-native-web";
const App = () => {
const [name, setName] = React.useState("Jhon Doe");
const handleName = () => {
setName("saten");
};
return (
<View style={{ flex: 1, marginTop: 100 }}>
<Text style={{ textAlign: "center", padding: 40 }}>{name}</Text>
<View style={{ width: 80, alignSelf: "center" }}>
<Button title="Update" onPress={handleName} />
</View>
</View>
);
};
export default App;
useEffect
useEffect declares a state variable that we can update directly.
import React,{useEffect} from "react";
import { View, Text } from "react-native";
import { Button } from "react-native-web";
const App = () => {
const [name, setName] = React.useState("Jhon Doe");
const handleName = () => {
setName("saten");
};
useEffect(() => {
},[name]);
return (
<View style={{ flex: 1, marginTop: 100 }}>
<Text style={{ textAlign: "center", padding: 40 }}>{name}</Text>
<View style={{ width: 80, alignSelf: "center" }}>
<Button title="Update" onPress={handleName} />
</View>
</View>
);
};
export default App;
useRef
..................................
useForwardRef
..................................
useMemo
..................................
useCallback
..................................
useReducer
..................................
useLayoutEffect
..................................
useDispatch
..................................
useSelector
..................................