INTRODUCTION
A JavaScript library is a collection of pre-written JavaScript code which provides ready-made features to simplify development tasks. Some of these development tasks include;
DOM Manipulation
AJAX Requests
Animation
Routing.
The use of JavaScript libraries to streamline these development tasks enables developers to save time and effort by leveraging on pre-built solutions rather than writing codes from scratch. Popular JavaScript libraries include jQuery, AngularJS, Vue.Js, React.Js and lodash.
REACT.JS
React.JS is an open-source JavaScript library developed by facebook which allows developers to build user interfaces out of individual pieces called components. React also allows developers to create reusable UI components that efficiently update and render based on changes in the application’s state.
It uses a declarative approach, where developers describe how the UI should look based on the current state, and React handles updating the DOM to match that state efficiently.
A simplified explanation of the operation of React component is that it accepts input data and generate the corresponding visual output on the screen. When there is user interaction, such as typing into an input field, you can provide these components with new data and React responds by automatically adjusting the screen to reflect these updates.
CONDITIONAL RENDERING IN REACT.JS
Conditional rendering in react is based on the same principle as the condition statements in javascript. They both serve the purpose of controlling the flow of execution depending on wether a condition evaluates to true or false.
Conditional rendering allows developers to control what content appears on the screen based on the current state of the application or user interactions. Common conditional rendering methods include:
- If statements: The If statement is used to decide which component to render based on a condition. For example:
function Goal(props) { const isGoal = props.isGoal;
if (isGoal) {
return <MadeGoal/>;
}
return <MissedGoal/>;}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Goal isGoal={false} />);
In the above example, if there is a goal, the component renders ‘MadeGoal’ else it renders ‘MissedGoal’. This is an example of conditional rendering.
- Ternary operator: The ternary operator is also used to conditionally render components. For example:
function Goal(props) {
const isGoal = props.isGoal;
return (
<>
{ isGoal ? <MadeGoal/> : <MissedGoal/> }
</>
);}const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Goal isGoal={false} />);
In the above example, if the isGoal is true, the MadeGoal component is returned, else the MissedGoal component is returned.
- Logical && Operator: The ‘&&’ operator can also be used to conditionally render elements.
For example:
function Garage(props) {
const cars = props.cars;
return (
<>
<h1>Garage</h1>
{cars.length > 0 &&
<h2>
You have {cars.length} cars in your garage.
</h2>
}
</>
);}
const cars = ['Ford', 'BMW', 'Audi'];const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage cars={cars} />);
In the above example, if the car length >0, the expression after ‘&&’ (You have {cars.length} will be displayed.
KEYS IN REACT.JS
Keys in React.JS are similar to name tags for elements in lists. They function to assign identities to elements within lists. When rendering a list of elements, React uses keys to efficiently update the DOM by comparing the keys of new elements with those of existing elements.
Keys are important when rendering lists of components because they enable React to identify which items have changed, are added or are removed.
EXAMPLES OF USING KEYS IN DIFFERENT SCENARIOS
Keys are given to elements inside the array to give the elements a stable identity. Sample usage of keys in react include:
- When rendering a list of components
const todoItems = todos.map((todo) =>
<li key={todo.id}>
{todo.text}
</li>
);
- Dynamic rendering with state management
a. Rendering a list of items
For example:
import React from "react";
import ReactDOM from "react-dom";
// Component to be extracted
function MenuItems(props) {
const item = props.item;
return <li>{item}</li>;
}
// Component that will return an
// unordered list
function Navmenu(props) {
const list = props.menuitems;
const updatedList = list.map((listItems) => {
return <MenuItems key={listItems.toString()} item={listItems} />;
});
return <ul>{updatedList}</ul>;
}
const menuItems = [1, 2, 3, 4, 5];
ReactDOM.render(
<Navmenu menuitems={menuItems} />,
document.getElementById("root")
);
TIPS FOR CHOOSING APPROPRIATE KEYS IN REACT.JS
Ensure that keys are unique
Keys should remain consistent across renders unless an item is removed or added
Avoid using random values as keys
Choose keys that are meaningful and relevant to the data they represent
HOOKS IN REACT.JS
Introduced with React 16.8, hooks streamline the management component state within functional components without writing a class. Some commonly used react hooks and their purposes are listed below.
useState: Allows functional components to manage local state. It returns a stateful value and a function to update that value, enabling components to re-render when the state changes.
useEffect: Enables functional components to perform side effects, such as fetching data, subscribing to external events, or manually changing the DOM.
useContext: Provides a way to consume a context (global state) in a functional component. It allows components to access values from a context without having to pass props through every level of the component tree.
useRef: Provides a way to persist mutable values across renders without causing re-renders. It's commonly used to access the underlying DOM elements or to store values that persist for the entire lifecycle of the component.
PRACTICAL EXAMPLES OF HOOKS SIMPLIFYING STATE MANAGEMENT
useState for State Management:
import React, { useState } from 'react';
function Counter() { const [count, setCount] = useState(0);
return (
Count: {count}
<button onClick={() => setCount(count + 1)}>Increment
); }
export default Counter;
In this example, the useState hook replaces the need for a constructor and setState method
useEffect for Lifecycle Methods:
import React, { useState, useEffect } from 'react';
function Timer() { const [seconds, setSeconds] = useState(0);
useEffect(() => { const intervalId = setInterval(() => { setSeconds(seconds => seconds + 1); }, 1000);
return () => clearInterval(intervalId); }, []); // Empty dependency array to run effect only once on mount
return
Seconds: {seconds}
; }
export default Timer;
In this example, the useEffect hook replaces lifecycle methods like componentDidMount and componentWillUnmount.
CONCLUSION
In conclusion, a mastery of the principles of conditional rendering, keys, and hooks in React.js will enable you to create dynamic and seamless user experiences as a developer . This is in addition to enhancing the efficiency and performance of your applications.
Hooks like useState and useEffect are essential for managing component state and handling side effects, enabling developers to maintain clean and organized code and manage application logic effectively, while properly implemented keys ensure efficient rendering and updating of lists and collections, minimizing unnecessary re-renders and optimizing performance, especially in large-scale applications with complex data structures.
A solid understanding of conditional rendering, keys, and hooks in React.js development is ideal for crafting high-quality, performant, and user-friendly web applications.
SOURCES
https://www.geeksforgeeks.org/reactjs-keys/amp/
https://dev.to/sidramaqbool/list-and-keys-in-reactjs-usage-benefits-best-practices-with-example-4k59