Skip to main content

Posts

Showing posts from February, 2022

What is React Context?

It works similar to a global variable means if we want to send data from one component to another component directly then we can use React Context. It solves the limitations of props because props will pass the data from the chain means the first component to second and second to third, we did not send data from first to third directly but using context we can pass data directly. Example 1st:- Note:- all components should be defined in same file import React from "react" ; const ThemeContext = React . createContext ( 'light' ); export default function ReactContextExample () {     return ( < ThemeContext.Provider value = "Test Context" >         < SecondApp />     </ ThemeContext.Provider > ) } function SecondApp () {     return ( <div>     < ThirdApp />     </div> ) } function ThirdApp () {         return ( < ThemeContext.Consumer >   ...

Hook in React-JS | useEffect, useLayoutEffect, useContext, useMemo, useCallback, useState, useRef

If we want to implement the react-life cycle activities under the function component then react provides hooks. we do not call the hooks it will automatically call during component loading. if we want to call the functionality during component update then we can call useEffect hooks, React provide multiple hooks method to implement hooks functionality in an application. Hooks are similar to JavaScript functions, but you need to follow these two rules when using them. Hooks rule ensures that all the stateful logic in a component is visible in its source code. These rules are: 1. Only call Hooks at the top level Do not call Hooks inside loops, conditions, or nested functions. Hooks should always be used at the top level of the React functions. This rule ensures that Hooks are called in the same order each time a components renders. 2. Only call Hooks from React functions You cannot call Hooks from regular JavaScript functions. Instead, you can call Hooks from React function components. H...

What is Refs in React

Refs is the shorthand used for references in React. It is similar to keys in React. It is an attribute which makes it possible to store a reference to particular DOM nodes or React elements. It provides a way to access React DOM nodes or React elements and how to interact with it. It is used when we want to change the value of a child component, without making the use of props. When to Use Refs Refs can be used in the following cases: When we need DOM measurements such as managing focus, text selection, or media playback. It is used in triggering imperative animations. When integrating with third-party DOM libraries. It can also use as in callbacks. When to not use Refs Its use should be avoided for anything that can be done declaratively. For example, instead of using open() and close() methods on a Dialog component, you need to pass an isOpen prop to it. You should have to avoid overuse of the Refs. How to create Refs In React, Refs can be created by using React.createRef(). It can b...

Database Tutorials on MYSQL Database Software

 What is Database? It is used to collect and store the data using structured and unstructured patterns. the database provides different rules to store and manage data. 1) DBMS:-  It provides storage of data using file pattern, we can not establish a relationship between files and records. MS-Excel, XML 2) RDBMS: It means relational database management system, it provides a set of rows and columns to store data means it provides a database table to store and manage records. We can establish relationships between tables and database objects. Name of RDBMS Software:- 1) Oracle  2) MYSQL 3) MS-SQL 4)  PostgreSQL 5)  IBM DB2 3)  ORDBMS:-  It means Object-Relational Database Management System. It provides storage of data using object patterns we can perform all operations under objects to manipulate the data. ORDBMS Tools:- Mongo DB is the database software tool to implement in Object patten Oracle Object & Forms 4)  CDBMS:-   CDBMS means a ...