DEV Community ­čĹęÔÇŹ­čĺ╗­čĹĘÔÇŹ­čĺ╗

G├╝lsen Keskin
G├╝lsen Keskin

Posted on • Updated on

React Cheatsheet

React Components

Fonksiyon component ├Ârne─či:

function App() {
  return (
     <div>Hello world!</div>
  );
} 
Enter fullscreen mode Exit fullscreen mode

React Props

Ana bile┼čenden alt component'e ge├žirilen veriler props olarak adland─▒r─▒l─▒r.Prop'lar (properties) salt okunur de─či┼čmez bile┼čenlerdir ve herhangi bir javascript de─čeri componentlerde dahil olmak ├╝zere prop olarak iletilebilir.

Fonksiyon component i├žin ├Ârnek prop kullan─▒m─▒:

function App() {
  return <User name="John Doe" />
}

function User(props) {
  return <h1>Hello, {props.name}</h1>; // Hello, John Doe!
}
Enter fullscreen mode Exit fullscreen mode

Object destructuring y├Ântemi ile prop kullan─▒m─▒:

function App() {
  return <User name="John Doe" />
}

function User({ name }) {
  return <h1>Hello, {name}!</h1>; // Hello, John Doe!
}
Enter fullscreen mode Exit fullscreen mode

React Children Props

Prop'lar bir component'in a├ž─▒l─▒┼č ve kapan─▒┼č etiketleri aras─▒na veri yerle┼čtirerek de ge├žirilebilir. Bu ┼čekilde g├Ânderilen proplar children prop olarak adland─▒r─▒l─▒r ve JSXÔÇÖi i├ž i├že koyarak di─čer bile┼čenlere ge├žirmenizi sa─člar:

function App() {
  return (
   <User>
     <h1>Hello, John Doe!</h1>
   </User>
  );
}

function User({ children }) {
  return children; //<h1>Hello, John Doe!</h1>
:  Hello, John Doe!
}
Enter fullscreen mode Exit fullscreen mode

React Conditionals

React'ta jsx i├žerisinde if ko┼čulu kullan─▒lmaz bunun yerine ├╝├žl├╝(ternary) operat├Âr├╝ kullan─▒r─▒z.

function App() {
    const isAuthUser = useAuth();

  return (
    <>
      <h1>My App</h1>
      {isAuthUser ? <AuthApp /> : <UnAuthApp />}
    </>
  ) 
}
Enter fullscreen mode Exit fullscreen mode

React Lists

.map() fonksiyonu

.map(), veri dizileri ├╝zerinde d├Âng├╝ olu┼čturmam─▒za ve JSX ├ž─▒kt─▒s─▒ almam─▒za olanak tan─▒r.

function SoccerPlayers() {
  const players = ["Messi", "Ronaldo", "Laspada"];

  return (
    <div>
      {players.map((playerName) => (
        <SoccerPlayer key={playerName} name={playerName} />
      ))}
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Bir listeyi jsx i├žerisinde d├Ând├╝─č├╝n├╝zde ona benzersiz(unique) bir key de─čeri eklemeyi unutmay─▒n. Key de─čerleri yaln─▒zca karde┼čler aras─▒nda benzersiz olmal─▒d─▒r.

React Context

React context, verileri prop kullanmadan component a─čac─▒m─▒za aktarmam─▒z─▒ sa─člar.

Proplarla ilgili sorun, bazen onlar─▒ almas─▒ gerekmeyen componentlerden ge├žirmemizdir. Bu soruna props drilling denir.

A┼ča─č─▒daki ├Ârnekte Body componentine (body componenti bu prop'u kullanmad─▒─č─▒ halde) alt bile┼čeni olan Greeting komponentine iletmesi i├žin prop ge├žirilmi┼čtir.

function App() {
  return (
    <Body name="John Doe" />
  );
} 

function Body({ name }) {
  return (
    <Greeting name={name} />
  );
} 

function Greeting({ name }) {
  return <h1>Welcome, {name}</h1>;
}
Enter fullscreen mode Exit fullscreen mode

Context'i kullanmak i├žin React'tan createContext fonksiyonunu kullan─▒r─▒z.

Context'i, context i├žine konulacak bir initial value ile ayarlar─▒z.

Olu┼čturulan context, bir Provider ve Consumer propertisi i├žerir. (Provider ve Consumer birer componenttir)

Provider'─▒ verilen de─čeri iletmek istedi─čimiz component a─čac─▒n─▒n etraf─▒na sarar─▒z. Ard─▒ndan Comsumer'─▒ de─čeri t├╝ketmek istedi─čimiz component'e yerle┼čtiririz.

import { createContext } from 'react';

const NameContext = createContext('');

function App() {
  return (
    <NameContext.Provider value="John Doe">
      <Body />
    <NameContext.Provider>
  );
} 

function Body() {
  return <Greeting />;
} 

function Greeting() {
  return (
    <NameContext.Consumer>
      {name => <h1>Welcome, {name}</h1>}
    </NameContext.Consumer>
  );
}
Enter fullscreen mode Exit fullscreen mode

React Hooks

React s├╝r├╝m├╝yle tan─▒t─▒lm─▒┼čt─▒r ve fonksiyon component'lere durum bilgisi eklemenin kolay bir yolunu sunar.

Mevcut hooklar─▒ kullanabilir ya da uygulaman─▒za ├Âzel i┼člev sa─člamak istiyorsan─▒z ├Âzel hooklar─▒n─▒z─▒ yazabilirsiniz.

HookÔÇÖlar classÔÇÖlar─▒n i├žerisinde ├žal─▒┼čmazlar ve ReactÔÇÖ─▒ classÔÇÖlar olmadan kullanman─▒za yararlar.

Ôťî´ŞĆ HookÔÇÖlar─▒n Kurallar─▒

HookÔÇÖlar─▒ her zaman React fonksiyonunuzun en ├╝st seviyesinde, herhangi bir return yapmadan ├Ânce kullan─▒n. Bu kural─▒ uygulayarak, bir bile┼čenin her render edildi─činde HookÔÇślar─▒n ayn─▒ s─▒rada ├ža─čr─▒ld─▒─č─▒ndan emin olursunuz. ReactÔÇÖin ├žoklu useState ve useEffect ├ža─čr─▒lar─▒ aras─▒ndaki HookÔÇÖlar─▒n durumunu do─čru ┼čekilde korumas─▒n─▒ sa─člayan ┼čey budur.

HookÔÇÖlar─▒ d├Âng├╝lerin, ko┼čullar─▒n veya i├ž i├že fonksiyonlar─▒n i├žerisinde ├ža─č─▒rmay─▒n.
HookÔÇÖlar─▒ sadece fonksiyonel React bile┼čenlerinde ├ža─č─▒r─▒n. Normal JavaScript fonksiyonlar─▒ i├žerisinde HookÔÇÖlar─▒ ├ža─č─▒rmay─▒n.

ÔÜí´ŞĆuseState HookÔÇÖu

useState fonksiyon component'lerde durum bilgisi olan(stateful) de─čerler kullanman─▒za olanak sa─člar.

import { useState } from 'react';

function MyComponent() {
  const [stateValue, setStateValue] = useState(initialValue);
}
Enter fullscreen mode Exit fullscreen mode

useState kullanman─▒n temel bir ├Ârne─či, bir sayac─▒ art─▒rmakt─▒r.

Count de─či┼čkeninden o anki say─▒m─▒ g├Ârebilir ve setCount i┼člevine count + 1 ge├žirerek durumu art─▒rabiliriz.

import { useState } from 'react';

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

  function updateCount() {
    setCount(count + 1);
  }

  return <button onClick={updateCount}>Count is: {count}</button>;
}
Enter fullscreen mode Exit fullscreen mode

State'i fonksiyondan ba┼člatmak

const StateFromFn = () => {
  const [token] = useState(() => {
    let token = window.localStorage.getItem("my-token");
    return token || "default#-token#"
  })

  return <div>Token is {token}</div>
}
Enter fullscreen mode Exit fullscreen mode

State'in bir ├Ânceki de─čeri prevState

const CounterFnSetState = () => {
  const [count, setCount] = useState(0);
  return (
    <>
      <p>Count value is: {count}</p>
      <button onClick={() => setCount(0)}>Reset</button>
      <button 
        onClick={() => setCount(prevCount => prevCount + 1)}>
        Plus (+)
      </button>
      <button 
        onClick={() => setCount(prevCount => prevCount - 1)}>
       Minus (-)
      </button>
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

ÔÜí´ŞĆuseEffect HookÔÇÖu

Bir API kullanmak gibi d─▒┼č d├╝nya ile etkile┼čim kurmak istiyorsak useEffect hook'unu kullan─▒r─▒z.

useEffect, bir yan etki (side effect) ger├žekle┼čtirmek i├žin kullan─▒l─▒r; bu, uygulamam─▒z─▒n d─▒┼č─▒nda var olan ve ├Âng├Âr├╝lebilir bir sonucu olmayan bir i┼člemi ger├žekle┼čtirmek anlam─▒na gelir.

React effectÔÇÖleri her render sonras─▒nda ├žal─▒┼čt─▒r─▒r. ─░lk render da buna dahildir.

import { useEffect } from 'react';

function MyComponent() {
   useEffect(() => {
     // perform side effect here
   }, []);
}
Enter fullscreen mode Exit fullscreen mode

Veri almak istiyorsak, bir g├Ânderi listesini almak ve g├Âr├╝nt├╝lemek gibi useEffect'i kullan─▒r─▒z:

import { useEffect } from 'react';

function PostList() {
     const [posts, setPosts] = useState([]);

   useEffect(() => {
       fetch('https://jsonplaceholder.typicode.com/posts')
       .then(response => response.json())
       .then(posts => setPosts(posts));
   }, []);

   return posts.map(post => <Post key={post.id} post={post} />
}
Enter fullscreen mode Exit fullscreen mode

Efekt fonksiyonunun d─▒┼č─▒ndan gelen bir de─čer kullanmam─▒z gerekiyorsa, bu, ba─č─▒ml─▒l─▒klar dizisine dahil edilmelidir.

├ľrne─čin, mobile menu her a├ž─▒ld─▒─č─▒nda veya kapat─▒ld─▒─č─▒nda body elementine "overflow-hidden" s─▒n─▒f─▒n─▒ ekleyen veya kald─▒ran bir kod par├žas─▒.

function Mobile({ open }) {
  useEffect(() => {
    const body = document.querySelector("#__next");

    if (open) {
      body.classList.add("overflow-hidden");
    } else {
      body.classList.remove("overflow-hidden");
    }
  }, [open]);

}
Enter fullscreen mode Exit fullscreen mode

Efektleri Atlayarak Performans─▒ Optimize Etme
Yeniden render olmas─▒ aras─▒nda belirli de─čerler de─či┼čmediyse ReactÔÇÖe bir efekti uygulamay─▒ atlamas─▒n─▒ s├Âyleyebilirsiniz. Bunu yapmak i├žin, bir diziyi useEffect e iste─če ba─čl─▒ ikinci bir parametre olarak iletin:

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes
Enter fullscreen mode Exit fullscreen mode

Yukar─▒daki ├Ârnekte, ikinci arg├╝man olarak [count] u iletiyoruz. Bunun anlam─▒ count e─čer 5 ise ve daha sonra bile┼čenimiz count hala 5 e e┼čit olacak ┼čekilde yeniden olu┼čturulursa, React ├Ânceki render daki [5] ile sonraki render daki [5] ÔÇśi kar┼č─▒la┼čt─▒r─▒r. Dizideki t├╝m ├Â─čeler ayn─▒ oldu─čundan (5 === 5), React efekti atlar.

Bir efekt ├žal─▒┼čt─▒rmak ve yaln─▒zca bir kez temizlemek istiyorsan─▒z (mount ve unmount s─▒ras─▒nda), bo┼č bir diziyi ([]) ikinci arg├╝man olarak iletebilirsiniz. Bu, ReactÔÇÖe efektinizin props veya stateÔÇÖdeki hi├žbir de─čere ba─čl─▒ olmad─▒─č─▒n─▒, bu y├╝zden asla yeniden ├žal─▒┼čt─▒r─▒lmas─▒ gerekmedi─čini s├Âyler.

Skipping effects (bo┼č dependency dizisi)
Efekt yanl─▒zca mount s─▒ras─▒nda ├ža─čr─▒l─▒r. (Componentin ilk render olmas─▒ durumunda)

useEffect(() => {
    document.title = `New value: ${value}` 
},[])
Enter fullscreen mode Exit fullscreen mode

Skipping effects (Ba─č─▒ml─▒l─▒k (dependency dizisi kullanmadan))
Bu durumda fonksiyon her render i┼čleminden sonra yeniden ├ža─čr─▒l─▒r. ├ľrne─čin state her g├╝ncellendi─činde useEffect fonksiyonu da ├žal─▒┼č─▒r.

useEffect(() => {
console.log(ÔÇťThis will be logged after every render!ÔÇŁ)
})
Enter fullscreen mode Exit fullscreen mode

Conditional useEffect

E─čer bir efekti ko┼čullu olarak ├žal─▒┼čt─▒rmak istiyorsak, bu ko┼čulu HookÔÇÖumuzun i├žerisine koyabiliriz:

useEffect(() => {
    if (value > 0) {
        document.title = `New value: ${value}` 
    }
})
Enter fullscreen mode Exit fullscreen mode

useEffect cleanup function

Bir bile┼čen kald─▒r─▒ld─▒─č─▒nda ya da yok edildi─činde kodu y├╝r├╝tmek i├žin useEffect fonksiyonuna bir 'return' ifadesi eklemeniz gerekir.

useEffect(() =>  { 
    const timer = window.setInterval(() => { 
        setCount(count => count + 1)
    }, 1000)
    return () => clearInterval(timer)
}, [])
Enter fullscreen mode Exit fullscreen mode

'clearInterval(timer)' kodu, yaln─▒zca component kullan─▒c─▒ arabiriminden kald─▒r─▒lmadan├Ânce y├╝r├╝t├╝l├╝r.

ba┼čka bir ├Ârnek:

const EffectCleanup = () => {
  useEffect(() => {
    const clicked = () => console.log('window clicked')
    window.addEventListener('click', clicked)

    // return a clean-up function
    return () => {
      window.removeEventListener('click', clicked)
    }
  }, [])

  return <div>
    When you click the window you'll 
    find a message logged to the console
  </div>
}
Enter fullscreen mode Exit fullscreen mode

├çoklu sat─▒r i├ži if

<span className={count === 0 && 'text-gray-500' || count > 0 && 'text-green-500' || count < 0 && 'text-red-500'}>{count}</span>

Enter fullscreen mode Exit fullscreen mode

ÔÜí´ŞĆuseRef HookÔÇÖu

useRef, bir JSX ├Â─česine do─črudan eri┼čmemizi sa─člar.
useRef ├žo─čunlukla bir DOM ├Â─česini hedeflemek i├žin kullan─▒l─▒r. Ancak, her olu┼čturma aras─▒nda de─či┼čen bir de─čeri korumak i├žin de kullan─▒l─▒r. useRef useState gibi re-render'─▒ (yeniden olu┼čturmay─▒) tetiklemez.

import { useRef } from 'react';

function MyComponent() {
  const ref = useRef();

  return <div ref={ref} />
}
Enter fullscreen mode Exit fullscreen mode

Bir elemente ref eklendi─činde, elementin kendisine eri┼čmek i├žin ref.current ├╝zerinde depolanan de─čeri kullanabiliriz.

├Ârne─čin kullan─▒c─▒lar Control + K tu┼č bile┼čimini kulland─▒klar─▒nda search imputuna odaklanan bir kod yazmak istersek:

import { useWindowEvent } from "@mantine/hooks";
import { useRef } from "react";

function Header() {
    const inputRef = useRef();

  useWindowEvent("keydown", (event) => {
    if (event.code === "KeyK" && event.ctrlKey) {
      event.preventDefault();
      inputRef.current.focus();
    }
  });

  return <input ref={inputRef} />
}
Enter fullscreen mode Exit fullscreen mode

Di─čer bir ├Ârnek:

const UseRefBasics = () => {
  const refContainer = useRef(null)
  const handleSubmit = (e) => {
    e.preventDefault()
    console.log(refContainer.current.value)
  }

  useEffect(() => {
    refContainer.current.focus()
  }, [])

  return (
    <div>
      <form className="form" onSubmit={handleSubmit}>
        <div>
          <input ref={refContainer} type="text" />
          <button type="submit">Submit</button>
        </div>
      </form>
    </div>
  )
};
Enter fullscreen mode Exit fullscreen mode

ÔÜí´ŞĆuseContext HookÔÇÖu

useContext, standart Context.Consumer bile┼čenini kullanmaktan daha kolay bir context t├╝ketme yolu sa─člar.

S├Âzdizimi, t├╝ketmek istedi─čimiz t├╝m Context nesnesini useContext'e ge├žirmeyi i├žerir. D├Ând├╝r├╝len de─čer, Context'e aktar─▒lan de─čerdir.

import { useContext } from 'react';

function MyComponent() {
  const value = useContext(Context);


}
Enter fullscreen mode Exit fullscreen mode

Daha ├Ânceki ├Ârne─čimizi useContext hook'unu kullanarak yeniden yazmak i├žin:

import { createContext, useContext } from 'react';

const NameContext = createContext('');

function App() {
  return (
    <NameContext.Provider value="John Doe">
      <Body />
    </NameContext.Provider>
  );
} 

function Body() {
  return <Greeting />;
} 

function Greeting() {
    const name = useContext(NameContext);

  return (
    <h1>Welcome, {name}</h1>
  );
}
Enter fullscreen mode Exit fullscreen mode

Not: olu┼čturdu─čunuz context'i farkl─▒ bir sayfadan ├ža─č─▒rmak i├žin const anahtar s├Âzc├╝─č├╝n├╝n ba┼č─▒na export eklemeyi unutmay─▒n! :)

├Ârnek: export const name = useContext(NameContext);

Bir di─čer ├Ârnek:

// example Context object
const ThemeContext = React.createContext("dark");

// usage with context Consumer
function Button() {
  return <ThemeContext.Consumer>
        {theme => <button className={theme}> Amazing button </button>}
  </ThemeContext.Consumer>
}


// usage with useContext hook 
import {useContext} from 'react';

function ButtonHooks() {
 const theme = useContext(ThemeContext)
 return <button className={theme}>Amazing button</button>
}
Enter fullscreen mode Exit fullscreen mode

De─čeri kullanmak i├žin:

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

const Display = () => {
 const theme = useContext(ThemeContext);
 return <div
        style={{
        background: theme === 'dark' ? 'black' : 'papayawhip',
        color: theme === 'dark' ? 'white' : 'palevioletred',
        width: '100%',
        minHeight: '200px'
        }}
    >
        {'The theme here is ' + theme}
    </div>
}
Enter fullscreen mode Exit fullscreen mode

ÔÜí´ŞĆuseCallback HookÔÇÖu

useCallback, uygulamam─▒z─▒n performans─▒na yard─▒mc─▒ olmak i├žin kulland─▒─č─▒m─▒z bir hook'dur.

├ľzellikle, uygulamam─▒z─▒n performans─▒na zarar verebilecek bir component her render edildi─činde (re-renders) fonksiyonlar─▒n yeniden olu┼čturulmas─▒n─▒ ├Ânler.

Hook'u kullanmak i├žin callback fonksiyonumuzu useCallback i├žerisine sarar─▒z ve ba─č─▒ml─▒l─▒klar dizisine (dependency list'e) de─či┼čmesi durumunda fonsiyonun yeniden ├žal─▒┼čt─▒r─▒laca─č─▒ parametreyi ekleriz.

function App() {
  const [player, setPlayer] = React.useState("");
  const [players, setPlayers] = React.useState(["Messi", "Ronaldo", "Laspada"]);

  function handleChangeInput(event) {
    setPlayer(event.target.value);
  }
  function handleAddPlayer() {
    setPlayers(players.concat(player));
  }
  const handleRemovePlayer = useCallback(player => {
    setPlayers(players.filter((p) => p !== player));
  }, [players])

  return (
    <>
      <input onChange={handleChangeInput} />
      <button onClick={handleAddPlayer}>Add Player</button>
      <PlayerList players={players} handleRemovePlayer={handleRemovePlayer} />
    </>
  );
}

function PlayerList({ players, handleRemovePlayer }) {
  return (
    <ul>
      {players.map((player) => (
        <li key={player} onClick={() => handleRemovePlayer(player)}>
          {player}
        </li>
      ))}
    </ul>
  );
}
Enter fullscreen mode Exit fullscreen mode

ÔÜí´ŞĆuseMemo HookÔÇÖu

useMemo, belirli bir i┼člemi "not almam─▒za" izin veren ba┼čka bir performans hook'udur.

Memoization, pahal─▒ hesaplamalar─▒n sonucunu, daha ├Ânce yap─▒lm─▒┼č olduklar─▒nda hat─▒rlamay─▒ m├╝mk├╝n k─▒lar, b├Âylece onlar─▒ tekrar hesaplamak zorunda kalmay─▒z.(Ayn─▒ de─či┼čkenlerle bir fonksiyonu ├žal─▒┼čt─▒rd─▒─č─▒n─▒zda yeniden hesaplama ve re-render yapmaz, daha ├Ânce yap─▒lan hesaplaman─▒n de─čerini kullan─▒r.)

useEffect ve useCallback gibi, useMemo da bir callback fonksiyonunu ve bir ba─č─▒ml─▒l─▒k dizisini (dependencies array) kabul eder.

Ancak bu fonksiyonlar─▒n her ikisinden de farkl─▒ olarak useMemo'nun bir de─čer d├Ând├╝rmesi ama├žlanm─▒┼čt─▒r.

De─čeri ya a├ž─▒k olarak return keyword'├╝ ile ya da dolayl─▒(implicitly) olarak arrow function k─▒sayolunu kullanarak d├Ând├╝rmelisiniz.

function App() {
    const [count, setCount] = useState(10)

    const expensiveComputation = useMemo(() => {
        return count * 2
    }, [count])

    return (
        <>
            <p>Count: {count}</p>
            <p>Expensive count: {expensiveComputation}</p>
            <button onClick={() => setCount(count + 1)}>Increment count</button>
        </>
    )
}
Enter fullscreen mode Exit fullscreen mode

Ger├žek d├╝nyadan bir useMemo ├Ârne─či, mdx-bundler belgelerinden gelir. mdx-bundler, .mdx dosyalar─▒n─▒ React component'lerine d├Ân├╝┼čt├╝rmek i├žin bir kitapl─▒kt─▒r.

Burada, ham bir kod dizisini bir React component'ine d├Ân├╝┼čt├╝rmek i├žin useMemo kullan─▒r.

import * as React from 'react'
import {getMDXComponent} from 'mdx-bundler/client'

function Post({code, frontmatter}) {
  const Component = React.useMemo(() => getMDXComponent(code), [code]);

  return (
    <>
      <header>
        <h1>{frontmatter.title}</h1>
        <p>{frontmatter.description}</p>
      </header>
      <main>
        <Component />
      </main>
    </>
  )
}
Enter fullscreen mode Exit fullscreen mode

Bunu yapman─▒n nedeni, component yeniden olu┼čturuldu─čunda component de─čerinin gereksiz yere yeniden olu┼čturulmas─▒n─▒ ├Ânlemektir.

useMemo bu nedenle yaln─▒zca kod ba─č─▒ml─▒l─▒─č─▒ de─či┼čirse callback fonksiyonunu y├╝r├╝t├╝r.

A┼ča─č─▒daki ├Ârnekte someValue nesnesi useMemo kulllan─▒larak not al─▒nabilir. Ve bu b├Âylece gereksiz re-render i┼člemi ger├žekle┼čmez.

const App = () => {
    const [age, setAge] = useState(99)
    const handleClick = () => setAge(age + 1)
    const someValue = useMemo(() => ({ value: "someValue" }))
    const doSomething = () => {
      return someValue
    }

    return (
      <div>
        <Age age={age} handleClick={handleClick}/>
        <Instructions doSomething={doSomething} />
      </div>
    )
}

const Age = ({ age, handleClick }) => {
  return (
    <div>
      <div style={{ border: '2px', background: "papayawhip", padding: "1rem" }}>
        Today I am {age} Years of Age
      </div>
      <pre> - click the button below ­čĹç </pre>
      <button onClick={handleClick}>Get older! </button>
    </div>
  )
}

const Instructions = React.memo((props) => {
  return (
    <div style={{ background: 'black', color: 'yellow', padding: "1rem" }}>
      <p>Follow the instructions above as closely as possible</p>
    </div>
  )
})

ReactDOM.render (<App />)
Enter fullscreen mode Exit fullscreen mode

ÔÜí´ŞĆuseReducer HookÔÇÖu

function App() {

    function reducer(state, action) {
        switch (action.type) {
            case 'plus':
                return state + 1
            case 'minus':
                return state - 1
        }
    }

    const [count, dispatch] = useReducer(reducer, 0)

    return (
        <>
            Count: {count}
            <button onClick={() => dispatch({ type: 'plus' })}>Plus 1</button>
            <button onClick={() => dispatch({ type: 'minus' })}>Minus 1</button>
        </>
    )
}
Enter fullscreen mode Exit fullscreen mode

ÔÜí´ŞĆuseLayoutEffect HookÔÇÖu

useEffect ile benzer bir kullan─▒ma sahiptir.

const ArrayDep = () => {
    const [randomNumber, setRandomNumber] = useState(0)
    const [effectLogs, setEffectLogs] = useState([])

    useLayoutEffect(
      () => {
        setEffectLogs(prevEffectLogs => [...prevEffectLogs, 'effect fn has been invoked'])
      },
      [randomNumber]
    )

    return (
      <div>
        <h1>{randomNumber}</h1>
        <button
          onClick={() => {
            setRandomNumber(Math.random())
          }}
        >
          Generate random number!
        </button>
        <div>
          {effectLogs.map((effect, index) => (
            <div key={index}>{'­čŹö'.repeat(index) + effect}</div>
          ))}
        </div>
      </div>
    )
  }
Enter fullscreen mode Exit fullscreen mode

useEffect ve useLayoutEffect aras─▒ndaki fark nedir? useEffect'e ge├žirilen fonksiyon, render ekrana i┼člendikten sonra etkinle┼čir.
Bu, taray─▒c─▒n─▒n ekran─▒ g├╝ncellemesini engellememesi gereken ├žo─ču yan etki(side effects) i├žin uygundur.

Yine de useEffect'in sa─člad─▒─č─▒ davran─▒┼č─▒ istemeyebilece─činiz durumlar vard─▒r; ├Ârne─čin, side effect olarak DOM'da g├Ârsel bir de─či┼čiklik yapman─▒z gerekiyorsa, useEffect en iyi se├žim olmayacakt─▒r.

Kullan─▒c─▒n─▒n de─či┼čiklik titre┼čimlerini g├Ârmesini ├Ânlemek i├žin useLayoutEffect'i kullanabilirsiniz. useLayoutEffect'e ge├žirilen fonksiyon, taray─▒c─▒ ekran─▒ g├╝ncellemeden ├Ânce ├žal─▒┼čt─▒r─▒lacakt─▒r.

ÔÜí´ŞĆuseReducer HookÔÇÖu

useReducer, useState'e alternatif olarak kullan─▒labilir. previous (├Ânceki) state de─čerine veya bir├žok state alt de─čerine (sub-values) ba─č─▒ml─▒l─▒─č─▒n oldu─ču complex state mant─▒─č─▒ i├žin idealdir.

const initialState = { width: 15 };

const reducer = (state, action) => {
  switch (action) {
    case 'plus':
      return { width: state.width + 15 }
    case 'minus':
      return { width: Math.max(state.width - 15, 2) }
    default:
      throw new Error("what's going on?" )
  }
}

const Bar = () => {
  const [state, dispatch] = useReducer(reducer, initialState)
  return <>
    <div style={{ background: 'teal', height: '30px', width: state.width }}></div>
    <div style={{marginTop: '3rem'}}>
        <button onClick={() => dispatch('plus')}>Increase bar size</button>
        <button onClick={() => dispatch('minus')}>Decrease bar size</button>
    </div>
    </>
}

ReactDOM.render(<Bar />)
Enter fullscreen mode Exit fullscreen mode

Initialize state lazily

useReducer ├╝├ž├╝nc├╝ bir fonksiyon parametresi al─▒r. Bu fonksiyondan state'i ba┼člatabilirsiniz ve bu fonksiyondan ne d├Ând├╝r├╝l├╝rse state nesnesi olarak d├Ând├╝r├╝l├╝r.

const initializeState = () => ({
  width: 100
})


const initialState = { width: 15 }
const reducer = (state, action) => {
  switch (action) {
    case 'plus':
      return { width: state.width + 15 }
    case 'minus':
      return { width: Math.max(state.width - 15, 2) }
    default:
      throw new Error("what's going on?" )
  }
}

const Bar = () => {
  const [state, dispatch] = useReducer(reducer, initialState, initializeState)
  return <>
    <div style={{ background: 'teal', height: '30px', width: state.width }}></div>
    <div style={{marginTop: '3rem'}}>
        <button onClick={() => dispatch('plus')}>Increase bar size</button>
        <button onClick={() => dispatch('minus')}>Decrease bar size</button>
    </div>
    </>
}

ReactDOM.render(Bar)
Enter fullscreen mode Exit fullscreen mode

e.preventDefault()

React'ta bir elementin varsay─▒lan davran─▒┼č─▒n─▒ engellemek i├žin e.preventDefault() kullan─▒l─▒r.

├ľrnek: Formun onSubmit olay─▒n─▒ engellemek i├žin:

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log('You clicked submit.');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}
Enter fullscreen mode Exit fullscreen mode

React.lazy

React.lazy fonksiyonu, dinamik importÔÇÖu normal bir bile┼čen gibi render etmeye yarar.

const OtherComponent = React.lazy(() => import('./OtherComponent'));

Suspense

Suspense, componentlerin render edilmeden ├Ânce bir ┼čey i├žin ÔÇťbeklemesiniÔÇŁ sa─člar. ┼×u an i├žin, Suspense yaln─▒zca bir kullan─▒m durumunu destekler: : componentleri React.lazy ile dinamik olarak y├╝kleme.

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
       //fallback propÔÇÖu, bile┼čenin 
       y├╝klenmesini beklerken g├Âstermek 
       istedi─činiz herhangi bir React eleman─▒n─▒ 
       kabul eder. 
      <Suspense fallback={<div>Y├╝kleniyor...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Transitions

Transitions, G├╝ncellemeleri transitions olarak i┼čaretlemenize olanak tan─▒r, bu da React'e kesintiye u─črayabileceklerini s├Âyler ve zaten g├Âr├╝n├╝r olan i├žerik i├žin Suspense yedeklerine geri d├Ânmekten ka├ž─▒n─▒r.

useTransition

const [isPending, startTransition] = useTransition();
Enter fullscreen mode Exit fullscreen mode

Ge├ži┼čin bekleyen(pending) state'i i├žin stateful value ve bunu ba┼člatmak i├žin bir fonksiyon d├Ând├╝r├╝r.

startTransition, sa─članan callback deki g├╝ncellemeleri transitions(ge├ži┼čler) olarak i┼čaretlemenizi sa─člar:

startTransition(() => {
  setCount(count + 1);
})
Enter fullscreen mode Exit fullscreen mode

isPending, bekleyen bir durumu(pending state) g├Âstermek i├žin bir transition'─▒n ne zaman etkin oldu─čunu g├Âsterir:

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

Default Props value

const Person = ({name, age, children}) => {
    return (
        <h1>Name: {name} Age: {age}</h1>
        <p>{children}</p>
    )
}

Person.defaultProps = {
    name: 'No name',
    age: 0,
}
Enter fullscreen mode Exit fullscreen mode

Props object destructuring

function App(){
  return people.map(person => <Person key={person.id} {...person} />)
}

const Person = ({name, age}) => {
  return (
      <h1>Name: {name}, Age: {age}</h1>
  )
} 
Enter fullscreen mode Exit fullscreen mode

G├╝ncellenmeye devam edecek...

Kaynaklar :)

Top comments (0)

­čîÜ Life is too short to browse without dark mode