useState/useEffect/props in React
The useState() is a built in react hook that allows you for having state variable in functional components.It should be used when the DOM has something that is dynamically manipulating/controlling.The idea with the usage of hooks is that we will be able to keep our code more functional and avoid class based components if they are not required.
UseEffect- The useEffect React hook is used for performing the side-effects in functional components.With the help of useEffect you inform React that your component requires something to be done after rendering the component or after a state change. The function you have passed (can be referred as “effect”) will be remembered by React and call afterwords the performance of DOM updates is over.Using this, we can perform various calculations such as data fetching,setting up document title,manipulating DOM directly etc. that don’t target the output value.The useEffect hook will run by default after the first render and also after each update of the component. React will guarantee that the DOM will be updated by when the effect has run by it. The useEffect React hook will accept 2 arguments: useEffect(callback,[dependency]) where the first argument callback represents the function having the logic of side-effects and it will immediately executed after changes were being pushed to the DOM. The second argument dependencies represent an optional array of dependencies.The useEffect() will execute the callback only if there is change in dependencies in between renderings.
Refs- Earlier refs were only limited to class components but now it can be also be accessible in functional components through the useRef hook in react.The refs are used for a-Managing focus,media playback or text selection b-Integrating with DOM libraries by third party c-Triggering the imperative animations.
Props — The props in react are the inputs to a component of React. They can be single-valued or objects having a set of values that will be passed to components of React during creation by using a naming convention that almost look similar to HTML-tag attribute. We can say that props are the data passed from a parent component into a child component.