{"id":82065,"date":"2024-10-31T10:12:37","date_gmt":"2024-10-31T06:42:37","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/20-essential-react-tricks-every-developer-must-know-5db1\/"},"modified":"2024-10-31T10:12:37","modified_gmt":"2024-10-31T06:42:37","slug":"20-essential-react-tricks-every-developer-must-know-5db1","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/20-essential-react-tricks-every-developer-must-know-5db1\/","title":{"rendered":"20 \u062a\u0631\u0641\u0646\u062f \u0636\u0631\u0648\u0631\u06cc React \u06a9\u0647 \u0647\u0631 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0627\u06cc \u0628\u0627\u06cc\u062f \u0628\u062f\u0627\u0646\u062f"},"content":{"rendered":"

Summarize this content to 400 words in Persian Lang
\n \u0648\u0627\u06a9\u0646\u0634 \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u062f \u0641\u0648\u0642 \u0627\u0644\u0639\u0627\u062f\u0647 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0627\u0633\u062a\u060c \u0627\u0645\u0627 \u062a\u0633\u0644\u0637 \u0628\u0631 \u0622\u0646 \u0628\u0647 \u0645\u0639\u0646\u0627\u06cc \u0641\u0631\u0627\u062a\u0631 \u0631\u0641\u062a\u0646 \u0627\u0632 \u0627\u0635\u0648\u0644 \u0627\u0648\u0644\u06cc\u0647 \u0648 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0628\u0631\u062e\u06cc \u0627\u0632 \u062a\u0631\u0641\u0646\u062f\u0647\u0627\u06cc \u06a9\u0645\u062a\u0631 \u0634\u0646\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0628\u0631\u0627\u06cc \u0633\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u062a\u0648\u0633\u0639\u0647 \u0627\u0633\u062a. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u062e\u0644\u0627\u0635\u0647 \u0627\u06cc \u0627\u0632 \u0634\u062e\u0635\u06cc \u0645\u0646 \u0627\u0633\u062a favourite 20 React tricks \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647\u0631\u0647 \u0648\u0631\u06cc \u0634\u0645\u0627 \u0631\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u062f\u0647\u062f \u0648 \u0628\u0647 \u0634\u0645\u0627 \u062f\u0631 \u0646\u0648\u0634\u062a\u0646 \u06a9\u062f\u0647\u0627\u06cc \u062a\u0645\u06cc\u0632\u062a\u0631 \u0648 \u0645\u0648\u062b\u0631\u062a\u0631 \u06a9\u0645\u06a9 \u06a9\u0646\u062f. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0628\u0647 \u0645\u062b\u0627\u0644\u200c\u0647\u0627 \u0628\u067e\u0631\u062f\u0627\u0632\u06cc\u0645!<\/p>\n

1. \u0627\u0631\u0632\u06cc\u0627\u0628\u06cc \u0645\u062f\u0627\u0631 \u06a9\u0648\u062a\u0627\u0647 \u0628\u0631\u0627\u06cc \u0631\u0646\u062f\u0631 \u0634\u0631\u0637\u06cc<\/p>\n

\u067e\u0631\u0647\u06cc\u0632 \u0627\u0632 \u067e\u0631\u062d\u0631\u0641\u06cc if \u0639\u0628\u0627\u0631\u0627\u062a \u0628\u0631\u0627\u06cc \u0631\u0646\u062f\u0631 \u0634\u0631\u0637\u06cc \u0628\u0627 \u0627\u0631\u0632\u06cc\u0627\u0628\u06cc \u0627\u062a\u0635\u0627\u0644 \u06a9\u0648\u062a\u0627\u0647.<\/p>\n

{isLoading && <Spinner \/>}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u06cc\u0646 \u0631\u0646\u062f\u0631 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0646\u0647\u0627 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 isLoading \u062f\u0631\u0633\u062a \u0627\u0633\u062a\u060c \u062a\u0645\u06cc\u0632 \u0646\u06af\u0647 \u062f\u0627\u0634\u062a\u0646 JSX \u062e\u0648\u062f.<\/p>\n

2. \u0646\u0627\u0645 \u06a9\u0644\u0627\u0633 \u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0628\u0627 classnames \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647<\/p>\n

\u0627\u06cc\u0646 classnames \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u060c \u0627\u0639\u0645\u0627\u0644 \u0645\u0634\u0631\u0648\u0637 \u06a9\u0644\u0627\u0633 \u0647\u0627 \u0631\u0627 \u0622\u0633\u0627\u0646 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

npm install classnames<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

import classNames from ‘classnames’;<\/p>\n

const buttonClass = classNames({
\n ‘btn’: true,
\n ‘btn-primary’: isPrimary,
\n ‘btn-secondary’: !isPrimary,
\n});<\/p>\n

<button className={buttonClass}>Click Mebutton><\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

3. \u0628\u0647 \u062e\u0627\u0637\u0631 \u0633\u067e\u0631\u062f\u0646 \u0645\u062d\u0627\u0633\u0628\u0627\u062a \u06af\u0631\u0627\u0646 \u0642\u06cc\u0645\u062a \u0628\u0627 useMemo<\/p>\n

\u0627\u06af\u0631 \u06cc\u06a9 \u0645\u062d\u0627\u0633\u0628\u0627\u062a \u067e\u0631\u0647\u0632\u06cc\u0646\u0647 \u0627\u0633\u062a\u060c \u0622\u0646 \u0631\u0627 \u0628\u0647 \u062e\u0627\u0637\u0631 \u0628\u0633\u067e\u0627\u0631\u06cc\u062f \u062a\u0627 React \u0628\u06cc \u062c\u0647\u062a \u062f\u0648\u0628\u0627\u0631\u0647 \u0645\u062d\u0627\u0633\u0628\u0647 \u0646\u06a9\u0646\u062f.<\/p>\n

const sortedData = useMemo(() => data.sort(), [data]);<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u06cc\u0646 \u062f\u0648\u0628\u0627\u0631\u0647 \u0645\u062d\u0627\u0633\u0628\u0647 \u0645\u06cc \u06a9\u0646\u062f sortedData \u062a\u0646\u0647\u0627 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 data \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

4. \u062d\u0630\u0641 \u0648\u0631\u0648\u062f\u06cc \u0647\u0627 \u0628\u0627 useEffect<\/p>\n

\u0628\u0627 \u062d\u0630\u0641 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0648\u0631\u0648\u062f\u06cc\u060c \u0627\u0632 \u0631\u0646\u062f\u0631\u0647\u0627\u06cc \u0645\u062c\u062f\u062f \u062f\u0627\u0626\u0645\u06cc \u062e\u0648\u062f\u062f\u0627\u0631\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n

const [value, setValue] = useState(”);
\nconst [debouncedValue, setDebouncedValue] = useState(”);<\/p>\n

useEffect(() => {
\n const handler = setTimeout(() => setDebouncedValue(value), 500);
\n return () => clearTimeout(handler);
\n}, [value]);<\/p>\n

<input value={value} onChange={(e) => setValue(e.target.value)} \/><\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

5. \u0642\u0644\u0627\u0628 \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0628\u0631\u0627\u06cc \u0645\u0646\u0637\u0642 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f<\/p>\n

\u0645\u0646\u0637\u0642 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0642\u0644\u0627\u0628 \u0633\u0641\u0627\u0631\u0634\u06cc \u06a9\u067e\u0633\u0648\u0644\u0647 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0627\u0632 \u0622\u0646 \u062f\u0631 \u0628\u06cc\u0646 \u0627\u062c\u0632\u0627\u0621 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n

function useFetch(url) {
\n const [data, setData] = useState(null);<\/p>\n

useEffect(() => {
\n fetch(url).then(res => res.json()).then(setData);
\n }, [url]);<\/p>\n

return data;
\n}<\/p>\n

const Component = () => {
\n const data = useFetch(‘\/api\/data’);
\n return <div>{data ? JSON.stringify(data) : ‘Loading…’}div>;
\n};<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

6. Lazy Loading Components \u0628\u0627 React.lazy<\/p>\n

\u0628\u0627 \u062a\u0642\u0633\u06cc\u0645 \u0627\u062c\u0632\u0627\u06cc \u062e\u0648\u062f \u0632\u0645\u0627\u0646 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0631\u0627 \u0628\u0647\u06cc\u0646\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

const LazyComponent = React.lazy(() => import(‘.\/LazyComponent’));<\/p>\n

function App() {
\n return (
\n <React.Suspense fallback={<div>Loading…div>}>
\n <LazyComponent \/>
\n React.Suspense>
\n );
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

7. \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 Props \u06cc\u0627 State \u0628\u0627 useRef<\/p>\n

\u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u0645\u0642\u0627\u062f\u06cc\u0631 \u062d\u0627\u0644\u062a \u0642\u0628\u0644\u06cc\u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f useRef.<\/p>\n

const [count, setCount] = useState(0);
\nconst prevCount = useRef(count);<\/p>\n

useEffect(() => {
\n prevCount.current = count;
\n}, [count]);<\/p>\n

console.log(`Previous: ${prevCount.current}, Current: ${count}`);<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

8. \u0628\u0627 \u0627\u0631\u0633\u0627\u0644 \u062a\u0648\u0627\u0628\u0639 \u0628\u0647 \u0631\u0646\u062f\u0631 \u0645\u062c\u062f\u062f \u062e\u0648\u062f\u062f\u0627\u0631\u06cc \u06a9\u0646\u06cc\u062f useCallback<\/p>\n

\u0627\u06af\u0631 \u062a\u0627\u0628\u0639\u06cc \u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 \u062a\u063a\u06cc\u06cc\u0631 \u0646\u062f\u0627\u0631\u062f\u060c \u0622\u0646 \u0631\u0627 \u0628\u0627 \u062d\u0627\u0641\u0638\u0647 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f useCallback.<\/p>\n

const increment = useCallback(() => setCount(count + 1), [count]);<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

9. \u062a\u062c\u0647\u06cc\u0632\u0627\u062a \u062a\u062e\u0631\u06cc\u0628\u06cc \u0628\u0631\u0627\u06cc \u06a9\u062f \u062a\u0645\u06cc\u0632\u062a\u0631<\/p>\n

\u067e\u0627\u06cc\u0647 \u0647\u0627 \u0631\u0627 \u062f\u0631\u0633\u062a \u062f\u0631 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u062a\u0627\u0628\u0639 \u062a\u062e\u0631\u06cc\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n

const User = ({ name, age }) => (
\n <div>{name} is {age} years olddiv>
\n);<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

10. React.Fragment \u0628\u0631\u0627\u06cc \u06af\u0631\u0648\u0647 \u0628\u0646\u062f\u06cc \u0639\u0646\u0627\u0635\u0631 \u0628\u062f\u0648\u0646 Div \u0647\u0627\u06cc \u0627\u0636\u0627\u0641\u06cc<\/p>\n

\u0639\u0646\u0627\u0635\u0631 \u0631\u0627 \u0628\u062f\u0648\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u06af\u0631\u0647 DOM \u0627\u0636\u0627\u0641\u06cc \u0628\u067e\u06cc\u0686\u06cc\u062f.<\/p>\n

<>
\n <p>Paragraph 1p>
\n <p>Paragraph 2p>
\n><\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

11. \u0645\u0631\u0632\u0647\u0627\u06cc \u062e\u0637\u0627 \u0628\u0631\u0627\u06cc \u06cc\u0627\u0641\u062a\u0646 \u062e\u0637\u0627\u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/p>\n

\u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u062e\u0631\u0627\u0628 \u0634\u062f\u0646 \u06a9\u0644 \u0628\u0631\u0646\u0627\u0645\u0647\u060c \u062e\u0637\u0627\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0645\u0624\u0644\u0641\u0647\u200c\u0647\u0627\u06cc \u0641\u0631\u0632\u0646\u062f \u062a\u0634\u062e\u06cc\u0635 \u062f\u0647\u06cc\u062f.<\/p>\n

class ErrorBoundary extends React.Component {
\n state = { hasError: false };<\/p>\n

static getDerivedStateFromError() {
\n return { hasError: true };
\n }<\/p>\n

render() {
\n if (this.state.hasError) return <h1>Something went wrong.h1>;
\n return this.props.children;
\n }
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\ud83d\udc68\u200d\ud83d\udcbb \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 Full Stack | \ud83e\udd16 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0645\u0627\u0634\u06cc\u0646 | \ud83e\udd1d Dev Relations Pro \u2013 \ud83d\udcbc \u0645\u0648\u062c\u0648\u062f \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u062e\u062f\u0627\u0645 – Jagroop2001<\/p>\n

github.com<\/p>\n

12. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 PropTypes \u0628\u0631\u0627\u06cc \u0627\u0639\u062a\u0628\u0627\u0631 \u0633\u0646\u062c\u06cc Prop<\/p>\n

\u0628\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0627\u0646\u0648\u0627\u0639 \u067e\u0627\u06cc\u0647\u060c \u0627\u0634\u06a9\u0627\u0644\u0627\u062a \u0631\u0627 \u0632\u0648\u062f\u062a\u0631 \u062a\u0634\u062e\u06cc\u0635 \u062f\u0647\u06cc\u062f.<\/p>\n

import PropTypes from ‘prop-types’;<\/p>\n

function MyComponent({ name }) {
\n return <div>{name}div>;
\n}<\/p>\n

MyComponent.propTypes = {
\n name: PropTypes.string.isRequired,
\n};<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

13. \u06a9\u0627\u0647\u0646\u062f\u0647 \u0647\u0627\u06cc \u0627\u06cc\u0627\u0644\u062a\u06cc \u0628\u0627 useReducer<\/p>\n

\u0628\u0631\u0627\u06cc \u0645\u0646\u0637\u0642 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062d\u0627\u0644\u062a\u060c useReducer \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u06a9\u0627\u0631\u0622\u0645\u062f\u062a\u0631 \u0628\u0627\u0634\u062f.<\/p>\n

const initialState = { count: 0 };<\/p>\n

function reducer(state, action) {
\n switch (action.type) {
\n case ‘increment’: return { count: state.count + 1 };
\n case ‘decrement’: return { count: state.count – 1 };
\n default: return state;
\n }
\n}<\/p>\n

const [state, dispatch] = useReducer(reducer, initialState);<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

14. useLayoutEffect \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u0647\u0627\u06cc DOM<\/p>\n

\u0627\u0641\u06a9\u062a \u0647\u0627 \u0631\u0627 \u0628\u0639\u062f \u0627\u0632 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc DOM \u0627\u0645\u0627 \u0642\u0628\u0644 \u0627\u0632 \u0631\u0646\u06af \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f.<\/p>\n

useLayoutEffect(() => {
\n console.log(“Layout effect”);
\n}, []);<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

15. Logic State \u0631\u0627 \u0628\u0627 Context \u0648 \u06a9\u067e\u0633\u0648\u0644\u0647 \u06a9\u0646\u06cc\u062f useContext<\/p>\n

\u0627\u06cc\u062c\u0627\u062f \u062d\u0627\u0644\u062a \u062c\u0647\u0627\u0646\u06cc \u0628\u062f\u0648\u0646 \u062d\u0641\u0627\u0631\u06cc \u067e\u0627\u06cc\u0647.<\/p>\n

const ThemeContext = React.createContext();<\/p>\n

function MyComponent() {
\n const theme = useContext(ThemeContext);
\n return <div style={{ background: theme }}>Hello!div>;
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

16. \u0627\u0632 \u062a\u0639\u0627\u0631\u06cc\u0641 \u062a\u0648\u0627\u0628\u0639 \u062f\u0631\u0648\u0646 \u062e\u0637\u06cc \u062f\u0631 JSX \u0627\u062c\u062a\u0646\u0627\u0628 \u06a9\u0646\u06cc\u062f<\/p>\n

\u062a\u0639\u0631\u06cc\u0641 \u062a\u0648\u0627\u0628\u0639 \u062f\u0631\u0648\u0646 \u062e\u0637\u06cc \u0628\u0627\u0639\u062b \u0631\u0646\u062f\u0631\u0647\u0627\u06cc \u0645\u062c\u062f\u062f \u0645\u06cc \u0634\u0648\u062f. \u062f\u0631 \u0639\u0648\u0636\u060c \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 \u062e\u0627\u0631\u062c \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f.<\/p>\n

const handleClick = () => console.log(“Clicked”);<\/p>\n

<button onClick={handleClick}>Click Mebutton><\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

17. \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u0627\u06cc\u0645\u0646 \u0628\u0647 \u0627\u0645\u0648\u0627\u0644\u060c \u0627\u0632 Chaining \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc \u062f\u0631 JSX \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f<\/p>\n

\u0645\u0642\u0627\u062f\u06cc\u0631 \u062a\u0647\u06cc \u06cc\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0646\u0634\u062f\u0647 \u0631\u0627 \u0628\u0647 \u062e\u0648\u0628\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\u06cc\u062f.<\/p>\n

<p>{user?.name}p><\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

18. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f key \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0645\u0634\u06a9\u0644\u0627\u062a \u0631\u0646\u062f\u0631 \u0645\u062c\u062f\u062f<\/p>\n

\u0647\u0645\u06cc\u0634\u0647 \u0647\u0646\u06af\u0627\u0645 \u0631\u0646\u062f\u0631 \u06a9\u0631\u062f\u0646 \u0644\u06cc\u0633\u062a \u0647\u0627 \u0627\u0632 \u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

{items.map(item => (
\n <div key={item.id}>{item.name}div>
\n))}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

19. \u0628\u0631\u0627\u06cc \u06a9\u0646\u062a\u0631\u0644 \u0628\u0647\u062a\u0631 \u0648\u0627\u0631\u062f\u0627\u062a\u060c \u0642\u0637\u0639\u0627\u062a \u0631\u0627 \u0628\u0627 \u0635\u0627\u062f\u0631\u0627\u062a \u0646\u0627\u0645\u06af\u0630\u0627\u0631\u06cc \u0634\u062f\u0647 \u0635\u0627\u062f\u0631 \u06a9\u0646\u06cc\u062f<\/p>\n

\u0635\u0627\u062f\u0631\u0627\u062a \u0646\u0627\u0645\u06af\u0630\u0627\u0631\u06cc \u0634\u062f\u0647 \u0648\u0627\u0631\u062f\u0627\u062a \u0642\u0637\u0639\u0627\u062a \u062e\u0627\u0635 \u0631\u0627 \u0622\u0633\u0627\u0646 \u062a\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

export const ComponentA = () => <div>Adiv>;
\nexport const ComponentB = () => <div>Bdiv>;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0633\u067e\u0633 \u062f\u0631 \u0635\u0648\u0631\u062a \u0646\u06cc\u0627\u0632 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n

import { ComponentA } from ‘.\/Components’;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

20. \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u0627\u062c\u0632\u0627\u06cc \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f: \u0627\u062c\u0632\u0627\u06cc \u0645\u0631\u062a\u0628\u0647 \u0628\u0627\u0644\u0627\u062a\u0631 (HOC)<\/p>\n

\u0627\u062c\u0632\u0627\u0621 \u0631\u0627 \u0628\u0627 HOC \u0628\u067e\u06cc\u0686\u06cc\u062f \u062a\u0627 \u0645\u0646\u0637\u0642 \u0627\u0636\u0627\u0641\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

function withLogging(WrappedComponent) {
\n return function Wrapped(props) {
\n console.log(‘Component Rendered’);
\n return <WrappedComponent {…props} \/>;
\n };
\n}<\/p>\n

const MyComponentWithLogging = withLogging(MyComponent);<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062a\u0633\u0644\u0637 \u0628\u0631 \u0627\u06cc\u0646 \u062a\u0631\u0641\u0646\u062f\u0647\u0627 \u0628\u0647 \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u06a9\u062f React \u0645\u062e\u062a\u0635\u0631\u060c \u062e\u0648\u0627\u0646\u0627 \u0648 \u06a9\u0627\u0631\u0622\u0645\u062f\u062a\u0631 \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f! \u06a9\u062f \u0646\u0648\u06cc\u0633\u06cc \u0645\u0628\u0627\u0631\u06a9!<\/p>\n

\n

\u0648\u0627\u06a9\u0646\u0634 \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u062f<\/strong> \u0641\u0648\u0642 \u0627\u0644\u0639\u0627\u062f\u0647 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0627\u0633\u062a\u060c \u0627\u0645\u0627 \u062a\u0633\u0644\u0637 \u0628\u0631 \u0622\u0646 \u0628\u0647 \u0645\u0639\u0646\u0627\u06cc \u0641\u0631\u0627\u062a\u0631 \u0631\u0641\u062a\u0646 \u0627\u0632 \u0627\u0635\u0648\u0644 \u0627\u0648\u0644\u06cc\u0647 \u0648 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0628\u0631\u062e\u06cc \u0627\u0632 \u062a\u0631\u0641\u0646\u062f\u0647\u0627\u06cc \u06a9\u0645\u062a\u0631 \u0634\u0646\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0628\u0631\u0627\u06cc \u0633\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u062a\u0648\u0633\u0639\u0647 \u0627\u0633\u062a. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u062e\u0644\u0627\u0635\u0647 \u0627\u06cc \u0627\u0632 \u0634\u062e\u0635\u06cc \u0645\u0646 \u0627\u0633\u062a favourite 20 React tricks<\/code> \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647\u0631\u0647 \u0648\u0631\u06cc \u0634\u0645\u0627 \u0631\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u062f\u0647\u062f \u0648 \u0628\u0647 \u0634\u0645\u0627 \u062f\u0631 \u0646\u0648\u0634\u062a\u0646 \u06a9\u062f\u0647\u0627\u06cc \u062a\u0645\u06cc\u0632\u062a\u0631 \u0648 \u0645\u0648\u062b\u0631\u062a\u0631 \u06a9\u0645\u06a9 \u06a9\u0646\u062f. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0628\u0647 \u0645\u062b\u0627\u0644\u200c\u0647\u0627 \u0628\u067e\u0631\u062f\u0627\u0632\u06cc\u0645!<\/p>\n\n

\n
\n

\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n