نکات react - بخش 1

()React.memo#

توسط کد زیر می توان از Re-render چند باره کامپوننت ها جلوگیری کرد:

    import React from "react"

    const Greeting = React.memo(props => {
        console.log("Greeting Comp render");
        return <h1>Hi {props.name}!</h1>;
    });

ENV.#

🎉 هرگاه بخواهیم در React از env. استفاده کنیم، کافیست یک فایل env. در روت پروژه بسازیم ( بهتر است ابتدا پکیج آن را نیز برای اطمینان نصب کنیم : yarn add dotenv -D )، حال میتوان توسط الگو زیر، از آن استفاده کنیم:

    SKIP_PREFLIGHT_CHECK=true
    REACT_APP_BASENAME= ""
    REACT_APP_SECRET_NAME = mamad

حتما باید با _REACT_APP شروع شود و حتما بعد از تغییر env. باید اپ را دوباره ران کنیم. همچنین برای دستری به این فایل می توان در کدمان به این صورت به آن دسترسی داشته باشیم:

    console.log(process.env.REACT_APP_SECRET_NAME)

🎉🎉 بهتر است که در gitignore. نیز آن را قرار دهیم.

منبع: create-react-app

etc#

🎉 توسط دکمه های WINDOWS + V می توان clipboard را باز کرد.

🎉 توسط دکمه های WINDOWS + SHIFT + S می توان print screen گرفت.

🎉 هرگاه بخواهیم ارور ها به Interceptors خود Axios ارسال شود، حتما باید ارور را در ()catch درخواستمان برگردانیم ( return ).

🎉 در React ما 4 property داریم ک مستقیما به خود کامپوننت متصل می شوند و هر کدام کاریی را انجام می دهند:

propTypes
displayName
defaultProps
contextTypes

    interface ChildProps {
    color: string;
}
    export const Child = ({color}: ChildProps) => {
    return <h1>{color}</h1>
}
    Child.defaultProps = {
    color: "blue"
}
    //! OR
    export const ChildAsFC : React.FC<ChildProps> = ({color}) => {
    return <div>{color}</div>
}
    ChildAsFC.defaultProps = {
        color: "green"
    }

🎉 برای اینکه یک خط کد را در شرایطی ک مقدار موجود falsy می باشد، نخواهیم اجرا کنیم، از type guard استفاده می کنیم:

    useEffect(() => {
        if(!inputRef.current) {
            return;
        }
        inputRef.current.focus()
    }, [])

🎉 هنگامی ک بخواهیم یک آبجکت را از یک آرایه بیرون بکشیم و یک پراپرتی از آن را تغییر دهیم، می توانیم از 2 روش زیر استفاده کنیم:

  const [persons, setPersons] = useState([
     { key: 1, name: "محمد فرهادی", completed: false },
    { key: 2, name: "اتابک هوشنگی", completed: false }]);

  const completedHandler = (key) => {
    const allPerson = [...persons];
    //! Way 1
    // const personIndex = allPerson.findIndex(person => person.key === key);
    // const person = allPerson[personIndex];
    // person.completed = !person.completed;
    // allPerson[personIndex] = person;
    // setPersons(allPerson);
    //! Way 2
    const person = allPerson.find((person) => person.key === key);
    person.completed = !person.completed;
    setPersons(allPerson);
  };