Chapter 05: Let’s get Hooked

by

  1. what is reconciliation in react
  2. what is react fibre
  3. Named Import and default import
    import {Title} from ‘./Title’ // it is not object destructuring
  4. what is one way databinding in react
  5. whenever you have to change any veriable inside react, you have to use react kind of variable using useState
const Body = () => {
let searchText = "KFC";

return(
  <>
     <div>
       <input
          type = 'text'
          placeholder = 'search'
          value = {searchText}
          onChange = {
          (e) => {
            searchText = e.target.value; // after writing value it will re-render itself so it will show same 
// hardcoded value
          }
         }
       />
     </div>
  </>
)
}

every component in react maintain state in it

  • what/why is state: react don’t track normal variable for re-rerendering if we will change the js variable it will not re-render the component so it will not be in sync with UI. to make sync with UI after changing in variable we should use useState() to create react variable. whenever react variable update it rerender the changed part of component using reconciliation
  • what/why is hooks : just a normal js function,
  • what/why is useState : to create state variable, it returns an array, first name of this array is variable 
const Body = () => {

// used to create localState Variable
let [searchText, setSearchText] = useState("KFC"};

return(
  <>
     <div>
       <input
          type = 'text'
          placeholder = 'search'
          value = {searchText}
          onChange = {
          (e) => {
            searchText = e.target.value; // after writing value it will re-render itself so it will show same 
// hardcoded value
          }
         }
       />
     </div>
  </>
)
}

Chapter 06: Exploring the world

  1. why react is fast
    because of faster DOM manupulation (virutual DOM and fast diff algo)
  2. changing input will re-execute that component but it will update the value of changed part only
  3. useEffect takes 2 params (callback function and dependency array), if dependency array is empty it will called once if it don’t have dependency array it will call on afterevery re-render
  4. there are 2 ways why component re-render 1. on state changes 2. on props changes
const Body = () => {

// used to create localState Variable
let [searchText, setSearchText] = useState("KFC"};
useEffect(() => {console.log('useEffect called')}, []);
console.log('render()');

return(
  <>
     <div>
       <input
          type = 'text'
          placeholder = 'search'
          value = {searchText}
          onChange = {
          (e) => {
            searchText = e.target.value; // after writing value it will re-render itself so it will show same 
// hardcoded value
          }
         }
       />
     </div>
  </>
)
}

output:

render()

useEffectCalled

==============

  1. empty dependency array => once after render
  2. dep array [searchText] => once after initial render + everytime after re-render after (my searchText changes)
//useEffect call back function called after render/re-render

Q) how browser works? painting and all .. critical browsing path and alll ..

inside JSX using {} you can write js expression not statement

Leave a Comment