DEV Community: Paritosh Gupta

React Hooks

Paritosh Gupta — Mon, 17 Jun 2024 09:41:16 +0000

React Hooks were introduced in React 16.8 to provide functional components with features previously exclusive to class components, such as state and lifecycle methods. Hooks allow for cleaner, more modular code, making it easier to share logic across components without relying on higher-order components or render props.

Basic Hooks

useState

useState is a Hook that allows you to add state to functional components. It returns a state variable and a function to update it.

Example:

`import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (

You clicked {count} times

setCount(count + 1)}>Click me

);
}

export default Counter;`

useEffect

useEffect is a Hook for performing side effects in functional components, such as fetching data, directly updating the DOM, and setting up subscriptions. It runs after the render by default.

Example:

`import React, { useState, useEffect } from 'react';

function Timer() {
const [count, setCount] = useState(0);

useEffect(() => {
const interval = setInterval(() => {
setCount(count + 1);
}, 1000);

return () => clearInterval(interval); // Cleanup on unmount

}, [count]); // Dependency array

return

{count};
}

export default Timer;`

Advanced Hooks

useContext
useContext allows you to consume context in a functional component, providing a way to share values like themes or authenticated users across the component tree without prop drilling.

Example:

`import React, { useContext, createContext } from 'react';

const ThemeContext = createContext('light');

function ThemedButton() {
const theme = useContext(ThemeContext);

return I am a {theme} button;
}

function App() {
return (

);
}

export default App;`

useReducer

useReducer is used for state management in more complex scenarios, similar to Redux. It is useful for managing state transitions.

Example:

`import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
}

function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);

return (

Count: {state.count}

dispatch({ type: 'increment' })}>+
dispatch({ type: 'decrement' })}>-

);
}

export default Counter;`

useRef

useRef returns a mutable ref object whose .current property is initialized to the passed argument. It can persist across renders.

Example:

`import React, { useRef } from 'react';

function TextInput() {
const inputEl = useRef(null);

const handleClick = () => {
inputEl.current.focus();
};

return (

Focus the input

);
}

export default TextInput;`

useMemo

useMemo is used to memoize expensive calculations, returning a memoized value only if the dependencies have changed.

Example:

`import React, { useState, useMemo } from 'react';

function ExpensiveCalculationComponent({ num }) {
const calculate = (num) => {
console.log('Calculating...');
return num * 2;
};

const memoizedValue = useMemo(() => calculate(num), [num]);

return

The result is: {memoizedValue};
}

function App() {
const [num, setNum] = useState(1);

return (

setNum(e.target.value)} />

);
}

export default App;`

useCallback
useCallback returns a memoized callback function that only changes if one of the dependencies changes. It is useful for preventing unnecessary re-renders of child components.

Example:

`import React, { useState, useCallback } from 'react';

function Button({ handleClick }) {
return Click me;
}

function App() {
const [count, setCount] = useState(0);

const handleClick = useCallback(() => {
setCount(count + 1);
}, [count]);

return (

Count: {count}

);
}

export default App;`
Custom Hooks
Custom Hooks are JavaScript functions that start with "use" and can call other Hooks. They enable the reuse of stateful logic between components.

Example:

`import React, { useState, useEffect } from 'react';

function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);

useEffect(() => {
async function fetchData() {
const response = await fetch(url);
const result = await response.json();
setData(result);
setLoading(false);
}

fetchData();

}, [url]);

return { data, loading };
}

function DataComponent({ url }) {
const { data, loading } = useFetch(url);

if (loading) return

Loading...;
return {JSON.stringify(data)};
}

function App() {
return ;
}

export default App;
`Conclusion
React Hooks provide a powerful and flexible way to manage state and side effects in functional components. By understanding and leveraging the various hooks, such as useState, useEffect, useContext, useReducer, useRef, useMemo, and useCallback, as well as creating custom hooks, React developers can write cleaner, more maintainable code. This approach fosters better code reuse and simplifies complex component logic, enhancing the overall development experience.

JavaScript API using Cylon.js to interact with IBM Watson cloud

Paritosh Gupta — Sat, 04 Mar 2023 05:46:25 +0000

Cylon is a Javascript framework with support for over 43 platforms for robotics, physical computing and internet of things. Cylon can run directly in the browser (through browserify) or any Chrome-connected app, and support http/https, mqtt and socket.io plugins.

Here is an example of how one can write a JavaScript API using Cylon.js to interact with IBM Watson cloud services:

`// Require the cylon module and watson developer cloud module
var Cylon = require('cylon');
var watson = require('watson-developer-cloud');

// Define the Watson speech-to-text service credentials
var speechToText = watson.speech_to_text({
username: 'your_username_here',
password: 'your_password_here',
version: 'v1'
});

// Define the robot
Cylon.robot({
// Define connections to hardware devices
connections: {
watson: { adaptor: 'watson', speech_to_text: speechToText }
},

// Define API
work: function(my) {
// Define functions to be exposed by the API
my.apiFunctions = {
transcribeAudio: function(audioFile, callback) {
// Use the Watson speech-to-text service to transcribe the audio file
var params = {
audio: audioFile,
content_type: 'audio/wav',
model: 'en-US_BroadbandModel'
};
my.watson.speech_to_text.recognize(params, function(err, res) {
if (err) {
console.log(err);
callback(err, null);
} else {
console.log(JSON.stringify(res, null, 2));
callback(null, res);
}
});
}
};
}
}).start();

// Expose API functions
module.exports = function(callback) {
Cylon.api({
host: '0.0.0.0',
port: '3000',
ssl: false,
auth: false,
CORS: false,
logger: false,
// Expose the apiFunctions object as the API
api: Cylon.robots[0].apiFunctions
});

// Call the callback function to indicate that the API is ready
callback();
};`

In this example, we first require the watson-developer-cloud module and create a speechToText object with the credentials for the Watson speech-to-text service.

We then define a robot with a connection to the Watson service using the watson adaptor. Inside the work function, we define an object called apiFunctions that contains a single function called transcribeAudio, which takes an audio file and a callback function as parameters. This function uses the recognize method of the Watson speech-to-text service to transcribe the audio file and calls the callback function with the result or an error.

We then use the Cylon.api function to expose the apiFunctions object as an API on port 3000. Finally, we export a function that takes a callback parameter, which is called when the API is ready. This allows us to start the API server asynchronously.

Temperature Sensor API in Javascript

Paritosh Gupta — Fri, 03 Mar 2023 06:45:46 +0000

Temperature sensors are devices used to measure temperature in solids, liquids or gases. They are used within industrial applications and have many more commercial uses. Most of the temperature sensors monitor temperature by measuring the change in resistance of an electrical current.

How can one create a temperature sensor API in JavaScript using Node.js?
To create a temperature sensor API in JavaScript, we will need to define the routes and handlers for the different endpoints of the API.

`const express = require('express');
const app = express();

// Define an array to store temperature readings
const temperatures = [];

// Define a route to get the current temperature reading
app.get('/temperature', (req, res) => {
// Get the latest temperature reading from the array
const latestTemperature = temperatures.length > 0 ? temperatures[temperatures.length - 1] : null;

// Return the latest temperature reading as JSON
res.json({ temperature: latestTemperature });
});

// Define a route to add a new temperature reading
app.post('/temperature', (req, res) => {
// Parse the temperature value from the request body
const temperature = req.body.temperature;

// Add the temperature value to the array
temperatures.push(temperature);

// Return a success message as JSON
res.json({ message: 'Temperature reading added successfully' });
});

// Start the server
const port = 3000;
app.listen(port, () => {
console.log(Temperature sensor API listening on port ${port});
});`

We are using the Express.js framework for building this API, and a middleware installed to parse the request body (such as the body-parser middleware).

To run this code, one needs to install the express package by running npm install express. Then, one can save the code to a file called server.js and run it with the command node server.js. The server will start listening on port 3000, and requests can be made to http://localhost:3000/temperature to get the current temperature.

Using MQTT.JS library

Paritosh Gupta — Thu, 02 Mar 2023 06:28:54 +0000

MQTT (Message Queuing Telemetry Transport) is a lightweight publish-subscribe messaging protocol designed for use in IoT (Internet of Things) and M2M (Machine to Machine) communication. MQTT protocol is a client-server protocol, where the clients are the IoT devices, and the server is the broker that facilitates communication between the devices.

Following is an example of how to create an MQTT client using the MQTT.js library in JavaScript:

const mqtt = require('mqtt')

// Connect to the MQTT broker
const client = mqtt.connect('mqtt://broker.agilytics.in')

// Subscribe to a topic
client.subscribe('my/topic')

// Publish a message to a topic
client.publish('my/topic', 'Hello Agilytics!')

// Handle incoming messages
client.on('message', (topic, message) => {
  console.log(`Received message on topic ${topic}: ${message}`)
})

// Handle errors
client.on('error', (error) => {
  console.error(`Error: ${error}`)
})

// Disconnect from the MQTT broker
client.end()

This code uses the mqtt library to connect to an MQTT broker, subscribe to a topic, publish a message to that topic, and handle incoming messages and errors. You'll need to replace mqtt://broker.agilytics.in with the address of your own MQTT broker.

My Flutter Learning

Paritosh Gupta — Tue, 02 Feb 2021 03:35:54 +0000

Dear Friends,
Wish you a very Happy New Year 2021. Wish you health and happiness.
Do you have a dream of developing awesome Mobile App or Web App?
Trust me Flutter is a suitable cross platform technology to fulfill your dream.
As the start of the month of February 2021, I have embarked my Flutter Learning journey with Google 30 Days Flutter program.

Here is the link for Google 30 Days Flutter program

Flutter is Google’s open source UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. It’s one of the fastest growing, most in-demand cross platform frameworks to learn and is used by freelance developers and large organizations around the world. Flutter uses the Dart language, so it will feel natural to many of you familiar with object-oriented languages. (Ref. Google 30 Days Flutter)

I am pretty excited to learn Flutter and do my ultimate activity i.e. to develop.

I will keep posting about my experience while learning.

Let's Join.