mfrancois3k

CounterFunc: functional React component for animated counting up using standard hooks

Small functional React component for counting numbers up to a certain value in a specified duration in ms. Useful for creating animated dashboards etc.

Uses React hooks useEffect, useState and useRef. Good example on how to pass props to a useEffect hook without declaring them as dependencies and how to deal with setInterval in functional components.

Usage

<CounterFunc countFrom={0} countTo={123} durationMs={400} />

React.js learning notes

React functional componenets and hooks

Use React memo API to prevent re-renders

In this example, every time you type something in the input field, the App component updates its state and triggers re-renders of the Count component. Use React memo in React Function Components to prevent a rerender when the incoming props of this component haven't changed:

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

	// @ts-nocheck
	import { useState, useEffect } from 'react'

	import axios from 'axios'

	export default function Forbes() {
	const [forbes, setForbes] = useState(null)
	const [realtor, setRealtor] = useState(null)
	const [zillow, setZillow] = useState(null)
	const [loading, setLoading] = useState(true)

	import React, { Component } from 'react';
	import styled from 'styled-components';

	const orangeColor = '#FE6680';
	const bubbleSize = 50;
	const stepperwidth = 800;

	const StepContainer = styled.div`
	width: ${stepperwidth}px;
	height: ${bubbleSize}px;

	axios({
	url: 'http://localhost:5000/static/example.pdf',
	method: 'GET',
	responseType: 'blob', // important
	}).then((response) => {
	const url = window.URL.createObjectURL(new Blob([response.data]));
	const link = document.createElement('a');
	link.href = url;
	link.setAttribute('download', 'file.pdf');
	document.body.appendChild(link);

	-> Hooks are function in react that lets you hook into features in react function based components
	-> Hooks always start with 'use' i.e useState(), useEffect().
	-> Hooks can only be called at the top level of the functional components, but we can define and use our own hooks and use it anywhere
	in the functional components.

	-> Here are some of the hooks we use in react function based components

	useState(); =>
	Syntax: const [count, setCount] = useState('initialState');
	params:

	import React from "react";
	import ReactDOM from "react-dom";

	function FunctionalComponent() {
	return "I'm the functional component";
	}

	const FunctionalComponentWithArrowFunction = () => {
	return "I'm the functional component";
	}