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

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

⚡️useLayoutEffect Hook’u

useEffect ile benzer bir kullanıma sahiptir ancak 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.

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

⚡️useReducer Hook’u

useReducer Hook'u, useState Hook'unun bir alternatifi olarak düşünülebilir ve daha kapsamlı state yönetimi için kullanılabilir. Özellikle çok sayıda state değişkeni veya state değişkenleri arasındaki bağımlılıklar varsa, useReducer Hook'u daha uygun olabilir. 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)