Hooks API Reference

Contents
Basic Hooks ............................................................................................................................................. 1
useState .............................................................................................................................................. 1
Equivalent Class Example ................................................................................................................. 2
useEffect.............................................................................................................................................. 2
Exemplu de utilizare a claselor: ........................................................................................................ 4
useContext .......................................................................................................................................... 6
Additional Hooks ..................................................................................................................................... 7
useReducer.......................................................................................................................................... 7
useCallback.......................................................................................................................................... 9
useMemo ............................................................................................................................................ 9
useRef ................................................................................................................................................. 9
useLayoutEffect ................................................................................................................................. 10
useTransition ..................................................................................................................................... 11

Basic Hooks
useState
Initializeaza starea in constructor si apoi se apeleaza setState daca dorim sa modificam stare.

const [isShowingText, setIsShowingText] = useState(true);

const [isShowingText, setIsShowingText] = useState(‘Mash’);

const [isShowingText, setIsShowingText] = useState([

{key:1, item:’Item1’},

{key:2, item:’Item2’},]);

const onPressHandler =()=>{

setIsShowingText(false)

setIsShowingText(“Programming with Mash”)

setIsShowingText([
{key:1, item:’NOItem1’},

{key:2, item:’NOItem2’},])};

onPress={onPressHandler} // onPress={()=>setState(true)}

setState(newState);

Equivalent Class Example

class Example extends React.Component {

constructor(props) {

super(props);

this.state = {

count: 0

};

render() {

return (

<View>

<Text>You clicked {this.state.count} times</Text>

<Button onClick={() => this.setState({ count: this.state.count + 1 })}>

Click me

</Button>

</View>

);

useEffect
1. Folosind acest Hook, îi spui lui React că componenta ta trebuie să facă ceva după
randare. React își va aminti funcția pe care ați transmis-o (ne vom numi „efectul nostru”)
și o va apela mai târziu după efectuarea actualizărilor
2. rulează atât după prima randare, cât și după fiecare actualizare.
 3. ne permite să accesăm count variabila de stare (sau orice elemente de recuzită) chiar din
efect.

useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]); /

Or
const [upcomindMovies, setMoviesImage] = useState();

const [popularMovies, setPopularMovies] = useState();

const [error, setError] = useState(false);

const [loaded, setLoaded] = useState(false);

const [title, setTitle] = useState();

const getData = () => {

return Promise.all([

getUpcomingMoview(),

getPopularMoview(),

]);

};

useEffect(() => {

getData()

.then(

([

upcomindMoviesData,

popularMoviesData,

]) => {

const moviesTextArray = [];

upcomindMoviesData.forEach(movie => {

moviesTextArray.push(movie.title);
 });

setTitle(moviesTextArray);

setMoviesImage(moviesImageArray);

setLoaded(true);

},

.catch(() => {

setError(true);

})

.finally(() => {

setLoaded(true); }); }, [ ]);

Exemplu de utilizare a claselor:

class Example extends React.Component {

constructor(props) {

super(props);

this.state = {

count: 0

};

componentDidMount() {

document.title = `You clicked ${this.state.count} times`;

componentDidUpdate() {

document.title = `You clicked ${this.state.count} times`;

}
 render() {

or

class FriendStatus extends React.Component {

constructor(props) {

super(props);

this.state = { isOnline: null };

this.handleStatusChange = this.handleStatusChange.bind(this);

componentDidMount() {

ChatAPI.subscribeToFriendStatus(

this.props.friend.id,

this.handleStatusChange

);

componentWillUnmount() {

ChatAPI.unsubscribeFromFriendStatus(

this.props.friend.id,

this.handleStatusChange

);

handleStatusChange(status) {

this.setState({

isOnline: status.isOnline

});

render() {

if (this.state.isOnline === null) {

return 'Loading...';
 }

return this.state.isOnline ? 'Online' : 'Offline';

useContext
1. Acceptă un obiect context și returnează valoarea contextului curent pentru acel context.
2. Când se actualizează cea mai apropiată componentă, acest Hook va declanșa o redare cu cel mai
recent context value transmis MyContext furnizorului respectiv.

const value = useContext(MyContext);

Exemplu:

const themes = {

light: {

foreground: "#000000",

background: "#eeeeee"

},

dark: {

foreground: "#ffffff",

background: "#222222"

};

const ThemeContext = React.createContext(themes.light);

function App() {
 return (

<ThemeContext.Provider value={themes.dark}>

<Toolbar />

</ThemeContext.Provider>

);

function Toolbar(props) {

return (

<div>

<ThemedButton />

</div>

);

function ThemedButton() {

const theme = useContext(ThemeContext);

return (

<button style={{ background: theme.background, color: theme.foreground }}>

I am styled by theme context!

</button>

);

Additional Hooks
useReducer
1. alternativă la useState.
2. Acceptă un reductor de tip (state, action) => newState și returnează starea curentă asociată cu o dispatch
metodă. (Dacă sunteți familiarizat cu Redux, știți deja cum funcționează.)
 3. useReducer este de obicei de preferat atunci useState când aveți o logică complexă a stării care implică
mai multe sub-valori sau când următoarea stare depinde de cea anterioară.

const [state, dispatch] = useReducer(reducer, initialArg, init);

Examplu:

function init(initialCount) {

return {count: initialCount};

function reducer(state, action) {

switch (action.type) {

case 'increment':

return {count: state.count + 1};

case 'decrement':

return {count: state.count - 1};

case 'reset':

return init(action.payload);

default:

throw new Error();

function Counter({initialCount}) {

const [state, dispatch] = useReducer(reducer, initialCount, init);

return (

<>

Count: {state.count}

<Button

onClick={() => dispatch({type: 'reset', payload: initialCount})}>

Reset

</Button>

<Button onClick={() => dispatch({type: 'decrement'})}>-</Button>

</>

);

useCallback
1. Returnează un apel invers memorat .
2. Transmite un apel invers inline și o serie de dependențe.
3. useCallback va returna o versiune memorată a apelului invers care se schimbă numai
dacă una dintre dependențe s-a schimbat.
const memoizedCallback = useCallback(

() => {

doSomething(a, b);

},

[a, b], );

useMemo
1. Returnează o valoare memorată .
2. Transmite o funcție de „creare” și o serie de dependențe.
3. useMemo va recalcula valoarea memorată numai atunci când una dintre dependențe s-a
schimbat. Această optimizare ajută la evitarea calculelor costisitoare la fiecare randare.
4. Amintiți-vă că funcția transmisă useMemo rulează în timpul redării. Nu faceți nimic
acolo ceea ce nu ați face în mod normal în timpul redării. De exemplu, efectele
secundare aparțin useEffect, nu useMemo.
5. Dacă nu este furnizată nicio matrice, o nouă valoare va fi calculată la fiecare randare.
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useRef
1. useRef returnează un obiect ref mutabil a cărui .current proprietate este inițializată la
argumentul transmis ( initialValue).
2. Obiectul returnat va persista pe toată durata de viață a componentei.
const refContainer = useRef(initialValue);

function TextInputWithFocusButton() {

const inputEl = useRef(null);

// `current` points to the mounted text input element

inputEl.current.focus();

};

return (

<>

<input ref={inputEl} type="text" />

<button onClick={onButtonClick}>Focus the input</button>

</>

);

useLayoutEffect
1. Semnătura este identică cu useEffect, dar se declanșează sincron după toate mutațiile DOM.
2. Utilizați acest lucru pentru a citi aspectul din DOM și a reda sincron.
3. Actualizările programate în interior useLayoutEffect vor fi eliminate sincron, înainte ca browserul
să aibă șansa de a picta.
4. Preferați standardul useEffect atunci când este posibil pentru a evita blocarea actualizărilor
vizuale.

Exemplu:

import { useState, useRef, useLayoutEffect } from 'react';

function Tooltip() {

const ref = useRef(null);

const [tooltipHeight, setTooltipHeight] = useState(0);

useLayoutEffect(() => {

const { height } = ref.current.getBoundingClientRect();

setTooltipHeight(height);
 }, []);

useTransition
1. Returnează o valoare cu stare pentru starea în așteptare a tranziției și o funcție pentru pornirea
acesteia.
2. startTransitionvă permite să marcați actualizările în apelul returnat ca tranziții.

Example:

function App() {

const [isPending, startTransition] = useTransition();

const [count, setCount] = useState(0);

function handleClick() {

startTransition(() => {

setCount(c => c + 1);

});

return (

<div>

{isPending && <Spinner />}

<button onClick={handleClick}>{count}</button>

</div>

);

Or

function TabContainer() {

const [isPending, startTransition] = useTransition();

const [tab, setTab] = useState('about');

startTransition(() => {

setTab(nextTab);

});

// ...

Skills
useState:

const [loading, setLoading] = useState(false);

const [error, setError] = useState(false);

const [post, setPost] = useState({});

useReducer:

const STATE = {

loading: false, error: false, post:{},

};

Const [state, dispatch] = useReducer(reducer, STATE);