The Hi Fi Tech

.useEffect

ReactJs Roadmap
If you want share anything about ReactJs comment in comment box.

Basic Things to learn in ReactJs

Which code editor are you using right now???





++
Follow our page Hi Fi Tech Talk for regular update

In this more competitive world, where new ideas are discussed every minute, pitches are made every hour, and products are introduced every day, there is an increased level of competition. To meet the challenge of this cutthroat world, especially in the field of technology, we must develop a new way of thinking. Eight out of every ten businesses or concepts are dependent on technology in the modern world. Additionally, the only way to expand your company in the technology sector is to abandon the traditional method and adopt a mix of divergent and convergent thinking.We need to re-think the business Creatively, with a strong enough Strategy that has covered all the factor of scaling and risk management, and by doing all this we will come up with an Innovative solution that will be the backbone of business sustainability. And this is where we come into the role, at The HiFi Tech World, with our team of Creative, Strategic & Innovative people, we help businesses grow through our team of experts in their respective fields.

www.thehifitech.com

https://www.linkedin.com/posts/the-hifi-tech-85964423a_localdoc-mobileappdevelopment-webappdevelopment-activity-7001760005334921216-hsvK?utm_source=share&utm_medium=member_android

+

Spread operator

Hi Fi Tech Talk

Git work flow

Hi Fi Tech Talk
Follow our page for regular updates

React js Road map

Hello world , how you're doing today.

Which one you use the most?
Comment below

Please discuss atleast one line about angular in comment box of you know about angular and share with your friends. ❤️

Hello world , how you're doing today.

Today we are going to talk about

Please discuss atleast one line about angular in comment box of you know about angular and share with your friends. ❤️

Topic Hooks

Prior to React Hooks (16.8), developers had to create class components in order to utilise specific React Features. But now that we can utilise stateful logic without modifying our component hierarchy, React Hooks offers a more ergonomic way to construct components.

If you like this post please share with your friends and like this post 😊

❤️ useState :
It is the most important and often used hook. The purpose of this hook to handle reactive data, any data that changes in the application is called state, when any of the data changes, React re-renders the UI.
const [count, setCount] = React.useState(0);

❤️ useEffect :
It allows us to implement all of the lifecycle hooks from within a single function API.

// this will run when the component mounts and anytime the stateful data changes
React.useEffect(() => {
alert('Hey, vishal here!');
});

// this will run, when the component is first initialized

React.useEffect(() => {
alert('Hey, vishal here!');
}, []);

// this will run only when count state changes
React.useEffect(() => {
fetch('vishal').then(() => setLoaded(true));
}, [count]);

// this will run when the component is destroyed or before the component is removed from UI.
React.useEffect(() => {
alert('Hey, vishal here');

return () => alert('Goodbye Component');
});

❤️ useContext :
This hook allows us to work with React's Context API, which itself a mechanism to allow us to share data within it's component tree without passing through props. It basically removes prop-drilling
const ans = {
right: '✅',
wrong: '❌'
}

const AnsContext = createContext(ans);

function Exam(props) {
return (
// Any child component inside this component can access the value which is sent.



)
}

function RightAns() {
// it consumes value from the nearest parent provider.
const ans = React.useContext(AnsContext);
return {ans}
// previously we were required to wrap up inside the AnsContext.Consumer
// but this useContext hook, get rids that.
}

❤️ useRef :
This hook allows us to create a mutable object. It is used, when the value keeps changes like in the case of useState hook, but the difference is, it doesn't trigger a re-render when the value changes.

The common use case of this, is to grab HTML elements from the DOM.
function App() {
const myBtn = React.useRef(null);
const handleBtn = () => myBtn.current.click();
return (


)
}

Thank you 😊☺️

Next hooks in next post stay tuned
Follow our page Hi Fi Tech Talk for regular updates

Custom are likewise subject to the standard rules of Hooks. Which are:

Only use Hooks when necessary. The use of hooks within loops, conditions, or nested functions is not recommended.
Hooks should only be used by React function components.
Don't use ordinary methods to call Hooks (Your own custom Hooks are the only other place that Hooks are legitimately called.) They'll be covered in a moment.)

Difference between vs
Please share with your developer friends give ❤️ if you like these post of Hi Fi Tech Talk

ABOUT JSX

Checkout this handy quick information guide

I know there are many more I've included only few if you know please mention in comment and share your knowledge .

Mention your developer friends share knowledge across the world ❤️

If you find these content are useful please give ❤️ icon share with friends

Thanks!

Tags ignore .


,

VS code shortcut for Developer

Checkout hand quick information guide

I know there are many more I've included only few if you know please mention in comment and share your knowledge .

Mention your developer friends share knowledge across the world ❤️

If you find these content are useful please give ❤️ icon share with friends

Thanks!

Tags ignore .


,

React js Developer

If you find these content are useful please give ❤️ icon share with friends

Thanks!

Tags ignore .


,