Category Archives: React

react js

Forward Ref (React)

June 28, 2020Reactadmin

ref – https://reactjs.org/docs/forwarding-refs.html

Here is a step-by-step explanation of what happens in the example:

We create a React ref by calling React.createRef and assign it to a ref variable.

We pass our ref down to <FancyButton ref={ref}> by specifying it as a JSX attribute.

React passes the ref to the (props, ref) => ... function inside forwardRef as a second argument.

We forward this ref argument down to <button ref={ref}> by specifying it as a JSX attribute.

When the ref is attached, ref.current will point to the <button> DOM node.

const FancyButton = React.forwardRef((props, ref) => (

{props.children}

</button>

));

// You can now get a ref directly to the DOM button:

const ref = React.createRef();

<FancyButton ref={ref}>Click me!</FancyButton>;

Functional vs Class component (React)

June 28, 2020Reactadmin

ref – https://medium.com/@Zwenza/functional-vs-class-components-in-react-231e3fbd7108

Functional Component

A functional component is just a plain JavaScript function which:
– accepts props as an argument
– returns a React element.
– DOES NOT have state. Thus, you cannot use setState()
– No lifecycle methods

If you NEED a state in your component you will either need to:

1) create a class component or
2) you lift the state up to the parent component and pass it down the functional component via props.

So…. why should I use functional components at all?

– Functional component are much easier to read and test because they are plain JavaScript functions without state or lifecycle-hooks
– less code
– easier to separate container and presentation components.
– When we write presentation component that does not have its own state, or need lifecycle hooks.

Class Component

A class component requires you to extend from React.Component and create a render function which returns a React element. By extending from React.Component, you can over-ride lifecycle methods.

Passing props to super

June 27, 2020Reactadmin

ref – https://stackoverflow.com/questions/30571875/whats-the-difference-between-super-and-superprops-in-react-when-using-e

There is only one reason when one needs to pass props to super(): When you want to access this.props in constructor.

Passing:

class MyComponent extends React.Component {

constructor(props) {

super(props)

console.log(this.props)

// -> { icon: 'home', … }

}

Not passing:

class MyComponent extends React.Component {

constructor(props) {

super()

console.log(this.props)

// -> undefined

// Props parameter is still available

console.log(props)

// -> { icon: 'home', … }

}

render() {

// No difference outside constructor

console.log(this.props)

// -> { icon: 'home', … }

}

Note that passing or not passing props to super has no effect on later uses of this.props outside constructor.

That is render, shouldComponentUpdate, or event handlers always have access to it.

Controlled Component

June 27, 2020Reactadmin

ref – https://stackoverflow.com/questions/42522515/what-are-react-controlled-components-and-uncontrolled-components
https://reactjs.org/docs/forms.html#controlled-components

A Controlled Component is one that takes its current value through props and notifies changes through callbacks like onChange. A parent component “controls” it by handling the callback and updating its state. It then passes the updated back to the controlled component. You could also call this a “dumb component”.

The parent component’s hold on that single source of data is called “single source of truth”.

In regards to Elements

class NameForm extends React.Component {

constructor(props) {

super(props);

this.state = {value: ''}; // single source of truth

this.handleChange = this.handleChange.bind(this);

this.handleSubmit = this.handleSubmit.bind(this);

}

handleChange(event) {

this.setState({value: event.target.value});

}

handleSubmit(event) {

alert('A name was submitted: ' + this.state.value);

event.preventDefault();

}

render() {

return (

<label>

Name:

</label>

</form>

);

}

1) Since the value attribute is set to display component’s state, the displayed value will always be this.state.value. This makes React state the single source of truth.
2) Since handleChange runs on every keystroke to update the React state, the displayed value will update as the user types.
3) With a controlled component, the input’s value is always driven by the React state.

With a Textarea, we write it like this:

class EssayForm extends React.Component {

constructor(props) {

super(props);

this.state = {

value: 'Please write an essay about your favorite DOM element.'

};

this.handleChange = this.handleChange.bind(this);

this.handleSubmit = this.handleSubmit.bind(this);

}

handleChange(event) {

this.setState({value: event.target.value});

}

handleSubmit(event) {

alert('An essay was submitted: ' + this.state.value);

event.preventDefault();

}

render() {

return (

<label>

Essay:

</label>

</form>

);

}

In regards to Components

We have controlled components ListGroup and Pagination. Notice we pass data into them to be processed and displayed. They then use callbacks such as selectedGenre, handlePageChange, handleNoGenre, handleGenreSelect to update parent component Movies’s state.

class Movies extends Component {

state = {...}

componentDidMount() {

console.log('--componentDidMount--');

}

render() {

const { ... } = this.state;

return (

<ListGroup

items={genres}

onItemSelect = {this.handleGenreSelect}

selectedItem={this.state.selectedGenre}

noGenre = {this.handleNoGenre}

</div>

<Pagination

itemsCount={count}

pageSize={pageSize}

currentPage = {currentPage}

onPageChange={this.handlePageChange}

</div>

</div>)

}

Pure components in React

June 24, 2020javascript, Reactpure component, pure functionadmin

ref – https://medium.com/technofunnel/working-with-react-pure-components-166ded26ae48
https://en.wikipedia.org/wiki/Pure_function
https://stackoverflow.com/questions/52680508/can-pure-functions-be-asynchronous
demo

Pure Functions

First, let’s talk about pure functions.

The definition of Pure Function says that for specific input parameters, we always have a specific output. The output is solely dependent on Input parameters and no other external variable.

Wikipedia defines it as:

Its return value is the same for the same arguments. 1 to 1. For a particular input, you won’t get different outputs. No mutation of local static variables, non-local variables, mutable reference arguments or I/O streams
Its evaluation has no side effects (no mutation of local static variables, non-local variables, mutable reference arguments or I/O streams).

example:

var initialValue = 10;

function addData(newValue) {

return initialValue + newValue;

}

It uses non-local variable initialValue. So it is impure.

var getInitialValue = 0;

function getValue(inputValue) {

getInitialValue = inputValue;

return getInitialValue;

}

The code specified above is another example of the impure function, where the function is modifying the global variable getInitialValue, which does not lie under the scope of this function. Modifying this variable results in the introduction of Impurity to the function, making it Impure.

function addData(firstInput, secondInput) {

return firstInput + secondInput;

}

var getData = addData(1, 2);

The function given above defines the output on the basis of the input parameter only.
No outer variables is adding its impact to the output.
Also, we can see that the function does not modify any other variable that does not belong to this function. Hence it adheres to the concept of Pure Functions.

Browser optimizations via Pure Functions

Pure Functions have a huge performance benefit during execution on the Browser.

Picture a scenario where a specific Pure Function is getting called multiple times.
The Application calls for the same function multiple times with the same parameters — assume “add(10, 20)”.
After executing it multiple times, the Chrome V8 Engine tries to optimize the code further by storing the execution result of the following function call. On the next call to the same function, with the same parameter, instead of executing the function again, the cached result is returned. Hence enhancing the Application Performance.

Functions should not introduce side effects

If the application updates certain data that is observable outside the called function, it can be considered a side effect introduced by the function.

Here are a few scenarios:

Modifying any external variable or object property (DOM)

– self explanatory. You use or modify outside global variables such as the document object.

Logging data to the console

– Similar to DOM, it is using outside object (console). Also, it prints something onto the screen.

Writing Data to a file

– It changes data to a file, which is global.

Writing data to the network

– Modifies network resources, which is global.

Triggering any external process
Calling any other (impure) functions with side-effects
Making Asynchronous Data Calls

– asynchronous actions usually is impure.

Most things that we use asynchronous functions for are inherently side-effect(ful): I/O, network stuff, timers. But even if we ignore those, promises alone rely on some kind of global state for their asynchrony: the event loop. This violates purity.

Pure Components

Pure Components in React are components which do not re-renders when the value of state and props has been updated with the same values.
If the value of the previous state or props and the new state or props is the same, the component is not re-rendered. Pure Components restricts the re-rendering ensuring the higher performance of the Component.

Features of React Pure Components

Prevents re-rendering of Component if props and state is the same
Takes care of “shouldComponentUpdate” implicitly

– It is the same as Component except that Pure Components take care of shouldComponentUpdate by itself, it does the shallow comparison on the state and props data. If the previous state and props data is the same as the next props or state, the component is not Re-rendered.

State and Props are Shallow Compared – standard arrays won’t work anymore as pushing a value results in the same array. What we need to do is use dot notation to create another array, then push the value
Pure Components are more performant in certain cases

Similar to Pure Functions in JavaScript, a React component is considered a Pure Component if it renders the same output for the same state and props value. React provides the PureComponent base class for these class components. Class components that extend the React.PureComponent class are treated as pure components.

Pure Components Restricts Re-rendering

Let’s look at this Component where we extend from standard Component. It is a impure component because we did not extend from PureComponent.
What makes it Impure?

Notice we do setInterval where we do a setState every 1 second.

class ImpureComponent extends React.Component {

constructor() {

super();

this.state = {

counter: 0

}

// The value of Counter is updated to same value during continues interval

setInterval(() => {

this.setState({

counter: 0

});

}, 1000);

}

render() {

return <b>Counter Value: {this.state.counter}</b>

}

When the state gets set, it changes, so our virtual DOM gets diff-ed. Once it diffs, it writes the changes to the real DOM. We do this every second. However, the UI never changes because nothing changes. We’re drawing the same thing over and over again. There is effectively no difference in the UI — the new values are unchanged. Re-rendering, in this case, is an overhead.

In order to solve this problem, we introduce…

Pure Components

They compare the initial and final values for the state and props variables. If there is no difference between the two, they won’t trigger the re-rendering logic for the component.

class ImpureComponent extends React.PureComponent {

constructor() {

super();

this.state = {

counter: 0

}

// The value of Counter is updated to same value during continues interval

setInterval(() => {

this.setState({

counter: 0

});

}, 1000);

}

render() {

// This function wont be re-rendered in case when the new state is same as previous

return <b>Counter Value: {this.state.counter}</b>

}

Each time the state or props are updated it compares the previous and next value — if the values are the same the Render function is not triggered. Performance is then improved by not calling “render” repeatedly.

Props and State Changes are Shallow Compared

In Pure Component, the changes in react “props” and “state” is Shallow Compared to know whether they have changed. If they have changed, it renders. If it doesn’t, it does not render.

Before we proceed further, we need to understand the concept of Shallow Comparison in JavaScript. The values saved in the variable can be either a primitive or reference type.

Example “var a = 10”, the value saved in the variable “a” is of primitive type.

The data stored in Objects and Array can be referred to as Reference type data. Comparing Primitive Values is not a concern.

Problems arise when we have reference values during the comparison.

var initialData = {

age: 30

}

var finalData = {

age: 30

}

// The value of "isEqual" equates to be "false" even if the property values are same

var isEqual = (finalData == initialData);

Because the comparison used is shallow (only compare values), then the == will return true. However, these are actually two different objects. So even though their value may the same, their address reference is different. They are two different objects.

In this example, we’re only dealing with one object. We have two references pointing to it. Thus, value comparison between the two references will be the same.

var userInfo = {

age: 30,

designation: "Developer"

}

var cloneData = userInfo;

cloneData.name = "Anshul Gupta";

if(cloneData == userInfo) {

alert("Reference Comparison return true")

}

We can also use spread operator to create a new object, and then copy the values over.

var userInfo = {

age: 30,

designation: "Developer"

}

var cloneData = { ...userInfo };

if(cloneData == userInfo) {

alert("TRUE")

} else {

console.log('FALSE');

}

IN this example, we create a whole new object with reference cloneData pointing to it. We then copy all properties/values from userInfo into it.
Thus in the end, we have two objects, with same properties and values. One has reference userInfo pointing to it. The other has reference cloneData pointing to it. cloneData == userInfo will return false because the references are pointing to different memory locations.

This issue with Shallow Comparison

Say we have a reference pointing to an object with an array.
We then push 6 onto it. When the PureComponent does a comparison, it will see that the before state’s userArray (and after state’s userArray) are ‘==’ (value equal) because they are pointing to the same object.

class ShalloWCompareComponent extends React.PureComponent {

constructor() {

super();

this.state = {

userArray: [1, 2, 3, 4, 5]

}

// The value of Counter is updated to same value during continues interval

setInterval(() => {

this.setState({

userArray: userArray.push(6)

});

}, 1000);

}

render() {

return <b>Array Length is: {this.state.userArray.length}</b>

}

But its clear that they are not the same. Before state’s userArray is 1,2,3,4,5. After state’s userArray is 1,2,3,4,5,6.

In the case when the props and state changes are made to primitive type variable,
state and props changes to reference variable may lead to incorrect results and inconsistent rendering.

The simple answer to resolving the shallow issue is to work with immutable data using dot operator

In the example above, we can see that comparing reference variables can lead to a problem — only the address of the object are compared before and after the update. Since we’re comparing references, the address still remains the same and the Pure Component does not detect any changes and does not re-render. We can resolve this by creating a new instance of the state variable if it represents the reference type.

class ShalloWCompareComponent extends React.PureComponent {

constructor() {

super();

this.state = {

userArray: [1, 2, 3, 4, 5]

}

setInterval(() => {

// Here we are creating the new Array Object during setState using "Spread" Operator

this.setState({

userArray: [...this.state.userArray, 6] // <--- use dot operator to create new object, and add our new value

});

}, 1000);

}

render() {

return <b>Array Length is: {this.state.userArray.length}</b>

}

we’re creating a new reference array using the spread operator. When the setState is called, the component looks for the reference of a previous array object and a new array object is created. The reference is different since this is a new instance of the array, so the object has a new address. Now the pure component will get to know that the data has been updated, the “render” life cycle will be invoked and the component will be re-rendered with correct values.

Example

React.memo() does the same as PureComponent but it does not check for changes in state, only in props. Hence, I will use React.memo in functional component here as an example.

npx create-react-app my-app
cd my-app
npm start

Then in /src, create MyPureComponent.js:

import React, { useState } from 'react';

let cur = 100; // start at d

const MyPureComponent = React.memo(props => {

const [data, setData] = useState(['a', 'b', 'c']);

const addLetter = () => {

console.log('lets add letter to our arry');

let ch = String.fromCharCode(cur);

cur++;

data.push(ch);

// setData([...data]); // works because pure components does shallow comparison

setData(data);

console.log(data);

}

return (

hello

</button>

{data.map(item => {

return <b key={item}>{item}</b>

})}

</>

)

});

export default MyPureComponent;

Basically, we initialize an array with a, b, c. Every time we click, we add the next few letters d, e, f, g….etc. We do this by using number 100, incrementing it, and getting the ascii code for it. Then we append that letter onto the array.

In index.js, we use our component.

import MyPureComponent from './MyPureComponent';

...

ReactDOM.render(

<App />

</>,

document.getElementById('root')

);

Run the app and start clicking the button.

As you can see, after doing shallow comparison of the previous prop to current prop, it gets the same reference value of the object. Thus, it never renders.

The fix here is to re-create the array and then do the push. That way, whenever you manipulate the array, you put the results onto a new array. Thus when the objects are compared, they are not the same, and thus triggers the render.

const addLetter = () => {

console.log('lets add letter to our arry');

let ch = String.fromCharCode(cur);

cur++;

setData([...data]);

//setData(data);

console.log(data);

}

The other thing you can do is to use React.memo’s second parameter with a areEqual function

1	React.memo(Component, [areEqual(prevProps, nextProps)]);

Let’s look at another example where we start off with NOT using a comparator. We are erroneously using two references to point to an array object. When we update this array, our sub component does not update because it does a shallow compare on the same array object.

let func = ({ data }) => {

console.log("SubComp is running and rerendering");

return <>

</>;

};

const SubComp = React.memo(func);

// App

function App() {

const [count, setCount] = useState(100)

const [arr, setArr] = useState(['a', 'b', 'c']);

const handleBtnClick = event => {

event.preventDefault();

// two references pointing at same array object

let newArr = arr;

let ch = String.fromCharCode(count);

newArr.push(ch);

setArr(newArr);

// when setting value, we can see the difference right away

setCount(count+1);

};

return (

<h1>{count}</h1>

<button onClick={handleBtnClick}>Click here</button>

</div>

);

}

export default App;

When we run it, we see that in the subcomponent, nothing gets re-render because its shallow comparison of prevProp and nextProp comes out to be true.

We fix it by using […arr] so that it creates a whole new objectArray, then copying all the values over. Memo will shallowly compare against two different objects, which then will actually correctly re-render because it will return false due to the two array objects being different.

let newArr = [...arr];

let ch = String.fromCharCode(count);

newArr.push(ch);

setArr(newArr); // this is what nextProp will be

Now as you add in additional letters, you’ll see that the sub component re-renders.

Using Comparator Func

The code stays the same. All we need to do is to make sure we stick a comparator function in our memo’s 2nd parameter.

1	const SubComp = React.memo(func, areEqual);

The handling of adding a letter stays the same.

let newArr = [...arr];

let ch = String.fromCharCode(count);

newArr.push(ch);

setArr(newArr); // this is what nextProp will be

then create an areEqual comparator:

const areEqual = (prevProps, nextProps) => {

console.log('prevProps', prevProps);

console.log('nextProps', nextProps);

return true;

}

We default it to return true because we don’t want it to re-render for now. We want to see the previous prop and next prop.

Great. We see that there is a difference. This is because the previous array is [‘a’, ‘b’, ‘c’]. We setArr to a new Arr that is a totally different array object by using […arr].
That way, we can see that both props are different.

Now let’s implement areEqual. Because our previous and next array data are different, we can actually make some decisions. If they are of different length, we re-render. If they are of different characters, we re-render. Otherwise, we don’t render.

// if equal --> don't render

// if NOT equal --> render

const areEqual = (prevProps, nextProps) => {

let prevArr = prevProps.data;

let nextArr = nextProps.data;

if (prevArr.length !== nextArr.length) {

console.log('false! must re-render');

return false;

} else {

// same length

for (let i = 0; i < nextArr.length; i++) {

if (prevArr[i] !== nextArr[i]) {

console.log('false, must re-render');

return false;

}

console.log('same! NO render')

return true;

}

Full Code

Copy and paste into App.js

import React, { useState } from 'react';

const areEqual = (prevProps, nextProps) => {

console.log('prevProps', prevProps);

console.log('nextProps', nextProps);

let prevArr = prevProps.data;

let nextArr = nextProps.data;

if (prevArr.length !== nextArr.length) {

console.log('false! must re-render');

return false;

} else {

// same length

for (let i = 0; i < nextArr.length; i++) {

if (prevArr[i] !== nextArr[i]) {

console.log('false, must re-render');

return false;

}

console.log('same! NO render')

return true;

}

// return true; // no change, don't render

// return false; there are changes, we need to render it.

}

// memo looks at data and see that there are always differences

let func = ({ data }) => {

return <>

<h3>Memo Functional Component</h3>

</>;

};

// works when we use [...arr] for parameter data

// const SubComp = React.memo(func);

// Let's use comparator func to compare prevProp and nextProp

// note: This must make sure of [...arr] so that prevProp and nextProp are different.

const SubComp = React.memo(func, areEqual);

// App

function App() {

const [count, setCount] = useState(100)

const [arr, setArr] = useState(['a', 'b', 'c']);

const handleBtnClick = event => {

event.preventDefault();

let newArr = [...arr]; // so that prevProp and nextProp are different

let ch = String.fromCharCode(count);

newArr.push(ch);

setArr(newArr);

// when setting value, we see that it does not get reflected in SubComp in the case of just arr.

// This is because it does not detect change referentially when arr === arr.

setCount(count+1);

};

// solution:

// 1) use [...arr] so prevProp and nextProp are different

// 2) can then use comparator func for custom comparisons

return (

<h1>{count}</h1>

<button onClick={handleBtnClick}>Click here</button>

</div>

);

}

export default App;

Store it into React state or Redux state?

June 24, 2020javascript, Reactadmin

ref – https://spin.atomicobject.com/2017/06/07/react-state-vs-redux-state/
https://stackoverflow.com/questions/39977540/can-redux-be-seen-as-a-pub-sub-or-observer-pattern

React state

React state is stored locally within a component. When it needs to be shared with other components, it is passed down through props.

In practice, this means that the top-most component in your app needing access to a mutable value will hold that value in its state.

If your top most component needs access to a value that is changeable, you need to hope it in React state. If this state is shared with other components, it needs to be passed through props.

If it can be mutated by subcomponents, you must pass a callback (into the subcomponent) to handle the update in the top-most component.

If your children components need to change this value, your parent component should pass a callback into your child component. That way when the child component changes the value, it can pass it back up to the parent component so it can update it. That way, the parent component is not holding the old value, while the child component has the newest updated value.

Redux state

The need of something like Redux when you have a more complicated application, with top-level components that need to talk to each other (actions) and somehow share some state.

Any component that needs access to a value may subscribe to the store and gain access to that value. Typically, this is done using container components. This centralizes all data but makes it very easy for a component to get the state it needs, without surrounding components knowing of its needs.

Redux is a library to manage shared state between components and to coordinate state mutations. Redux uses a pub/sub pattern.

It has a subscribe method that is used by components to subscribe to changes in the state tree. Normally you don’t use store.subscribe directly, as the Redux-React bindings (Redux’s connect basically) do that for you. The store then emits the changes.

Consider also that it’s perfectly fine to keep using the components internal state together with Redux. You can use the internal state to store state you don’t need/want to share with other components.

Some Guidelines on where to store state

Duration

Different pieces of state are persisted for different amounts of time. I loosely categorize time into these groups:

Short term: data that will change rapidly in your app

Short term data will likely change rapidly. At the simplest level, this includes the characters present in a text field as the user types. I would also extend this to include data in an entire form; this data can be considered a work in progress until the form is submitted. This type of data can be stored in local React state. I would even include things like how to filter a list of items, and whether or not to show or hide completed items in a to-do app (assuming it is not tied to user preferences).

Medium term: data that will likely persist for a while in your app

By medium-term state, I mean state that will stick around while the user navigates your app. This could be data loaded from an API, or any changes that you want to be persisted up until a page refresh.

However, after submitting a form, I would store the state in the Redux store. As an example, if a user submits a form updating their profile information, it would make sense to store this in Redux.

Long term: data that should last between multiple visits to your site

This is state that should be persisted between refreshes of the page or between separate visits to the page. Since the Redux store will be created anew when refreshing, this type of data should be stored somewhere else (likely to a database on a server or into local storage in the browser).

Breadth of Use

Another consideration is how many components in your React app need to access the state. The more state needs to be shared between different components in your app, the more benefit there is to using the Redux store. If the state feels isolated to a specific component or a small part of your app, React state may be a better option.

Depth of passing down props

React state should be stored in the most top-level component for which a subset of its subcomponents will need access to the state. Sometimes, this can mean many layers between the component storing the state and the subcomponents that render the data, and each layer means another prop must be propagated down the virtual DOM.

Parent-to-Child prop passing and callback propagating works great if you only need to pass the state down one or two levels into the subcomponents. But beyond that, it can feel tedious and require edits to many components every time you find a subcomponent needs access to new state. In cases like this, I find it much easier to store the state in Redux and use a container component to pluck the desired data from the store.

Unrelated components needing the same state

It could also be that multiple, relatively unrelated components need access to the same state. Take the above example of a form to update a user’s profile. The component here should receive the initial user profile in its props. You might also have a header component with a subcomponent that displays the user’s username or related data.

You could, of course, take passing down props to the extreme, in which your top-level component knows about the user’s profile and passes it to the header, which passes it to a subcomponent (and maybe further), and also passes it down to the profile-editing component. However, this requires a lot of management between the whole virtual DOM.

This type of solution is solved much more cleanly by storing the profile in the Redux store, and allowing container components around the header and profile-editing component to grab data from Redux’s store.

Ability to Track Changes to the State

Another time to choose Redux is when you need to track changes to state:

Maybe you want to replay events.
Maybe you want to implement undo/redo in your app.
Maybe you just want to log how state is changing.

In cases like these, Redux is a great solution; each action that is created is an artifact of how the state changes. Redux makes all these tasks simpler by centralizing them in a single store.

Refs (accessing the DOM)

June 23, 2020Reactadmin

ref – https://reactjs.org/docs/refs-and-the-dom.html

There are a few good use cases for refs:

Managing focus, text selection, or media playback.
Triggering imperative animations.
Integrating with third-party DOM libraries.

Refs are created using React.createRef() and attached to React JSX elements via the ref attribute. Refs are commonly assigned to an instance property when a component is constructed so they can be referenced throughout the component.

class MyComponent extends React.Component {

constructor(props) {

super(props);

this.myRef = React.createRef(); // Refs are commonly assigned to an instance property

// so they can be referenced throughout the component.

}

render() {

// attached to React JSX elements via the ref attribute

return <div ref={this.myRef} />;

}

When a ref is passed to an element in render, a reference to the node becomes accessible at the current attribute of the ref.

1	const node = this.myRef.current;

When the ref attribute is used on an HTML element, the ref created in the constructor with React.createRef() receives the underlying DOM element as its current property.

When the ref attribute is used on a custom class component, the ref object receives the mounted instance of the component as its current.
You may not use the ref attribute on function components because they don’t have instances.

In our CustomTextInput:

1) create a ref using React.createRef() and assign it to this.textInput

2) in render, assign an input control’s ref attribute to our this.textInput.
This creates a current property in our this.textInput and assigns the node of that input control to it.

3) For demo purposes, we want to show we can now control the input by programmatically putting a focus on it.
We do this by writing a method called focusTextInput. We create a button. Whenever that button is clicked, it sends
an event to our focusTextInput. In turn our focusTextInput uses our ref to programmatically put focus onto our input control.

class CustomTextInput extends React.Component {

constructor(props) {

super(props);

// create a ref to store the textInput DOM element

this.textInput = React.createRef();

this.focusTextInput = this.focusTextInput.bind(this);

}

focusTextInput() {

// Explicitly focus the text input using the raw DOM API

// Note: we're accessing "current" to get the DOM node

this.textInput.current.focus();

}

render() {

// tell React that we want to associate the <input> ref

// with the `textInput` that we created in the constructor

return (

<div>

<input

type="text"

ref={this.textInput} />

<input

type="button"

value="Focus the text input"

onClick={this.focusTextInput}

</div>

);

}

You can also use it on component lifecycle functions like so:

class AutoFocusTextInput extends React.Component {

constructor(props) {

super(props);

this.textInput = React.createRef();

}

componentDidMount() {

this.textInput.current.focusTextInput(); // <--

}

render() {

return (

);

}

However, you can only use it on class component because there is an instance.

In functional components, you cannot use it because there is no instance:

// create your functional component

function MyFunctionComponent() {

return <input />;

}

class Parent extends React.Component {

constructor(props) {

super(props);

this.textInput = React.createRef();

}

render() {

// you CANNOT do this...X

return (

);

}

If you want to allow people to take a ref to your function component, you can use forwardRef.

You can, however, use the ref attribute inside a function component as long as you refer to a DOM element or a class component:

function CustomTextInput(props) {

// textInput must be declared here so the ref can refer to it

const textInput = useRef(null);

function handleClick() {

textInput.current.focus();

}

return (

<div>

<input

type="text"

ref={textInput} />

<input

type="button"

value="Focus the text input"

onClick={handleClick}

</div>

);

}

Forward Refs

Ref forwarding is a feature that lets some components take a ref they receive, and pass it further down to a child.

const ButtonElement = React.forwardRef((props, ref) => (

{props.children}

</button>

));

// Create ref to the DOM button:

const ref = React.createRef();

<ButtonElement ref={ref}>{'Forward Ref'}</ButtonElement>

Callback Refs

React also supports another way to set refs called “callback refs”, which gives more fine-grain control over when refs are set and unset.

Instead of passing a ref attribute created by createRef(), you pass a function. The function receives the React component instance or HTML DOM element as its argument, which can be stored and accessed elsewhere.

class CustomTextInput extends React.Component {

constructor(props) {

super(props);

this.textInput = null;

this.setTextInputRef = element => {

this.textInput = element;

};

this.focusTextInput = () => {

// Focus the text input using the raw DOM API

if (this.textInput) this.textInput.focus();

};

...

render() {

// Use the `ref` callback to store a reference to the text input DOM

// element in an instance field (for example, this.textInput).

return (

<div>

<input

type="text"

ref={this.setTextInputRef}

...

</div>

);

}

Mosh Redux part 6 (reduxjs toolkit’s slice)

June 8, 2020Reactadmin

redux toolkit also has slices, which combines createAction and createReducer.

So it automatically creates actions and reducers for us.

questions.js
let’s import createSlice

1	import { createSlice } from '@reduxjs/toolkit';

createSlice takes an object with properties name, initialState, and reducers.
name represent the feature of this reducer.
intialState is the starting point of the state.
Finally, we have a reducers property, which references an object. Inside this object,

createSlice({

initialState: [],

reducers: {

// actions => actionHandlers

questionAdded: {

}

})

In the previous approach, questionAdded was an object, so we can use [questionAdded] to check for the type.

In this approach, questionAdded is just a property. Slices automatically creates actionTypes and actions for us.

let’s look at this slice object.

1 2	const slice = createSlice({...}); console.log(slice);

We see the properties. We need to default export the reducer and export the actions.

So with this implementation we can remove the previous actions and reducers.

1	export default slice.reducer;

also need to export actions. We do so by extracting actions from slice.actions

1	export const { questionAdded, questionAnswer } = slice.actions;

let lastId = 0;

const slice = createSlice({

initialState: [],

reducers: {

// actions => action handlers

questionAdded: (state, action) => {

state.push({

id: ++lastId,

description: action.payload.description,

answer: action.payload.answer

});

questionAnswer: (state, action) => {

const index = state.findIndex(question => question.id === action.payload.id);

state[index].answer = action.payload.answer;

}

});

export const { questionAdded, questionAnswer } = slice.actions;

export default slice.reducer;

Mosh Redux part 5 (cleaner code with reduxjs toolkit)

June 4, 2020Reactadmin

source code

Here we talk about a powerful library called redux toolkit

Open up a terminal and type:
npm i @reduxjs/toolkit

Redux toolkit provides a bunch of tools to simplify redux code.

One of them is for creating the store. Typically, we extract createStore from redux. Then put your reducers into createStore as a higher order function. We export this store to be used in our index.

import { createStore } from 'redux';

import reducer from './questions';

export default function MyStore() {

const store = createStore(

reducer,

);

return store;

If we use createStore way, we have do a lot of stuff manually.

But with redux tookit, we have a new way:

configureStore

We import our reducer(s) from our feature and insert via an object with property reducer:

import { configureStore } from '@reduxjs/toolkit';

import reducer from './questions';

export default function () {

return configureStore({

reducer,

});

}

A pro on using configureStore is that allows us to dispatch asynchronous actions.

Actions with less boilerplate

Typically we create actions by defining constants, then define objects with properties type and payload. The type property uses the defined constants.

However, there is a problem. Every action returns an action like so:

export const questionAdded = description => ({

type: QUESTION_ADDED,

payload: {

description

}

});

export const questionAnswer = (id, answer) => ({

type: QUESTION_ANSWER,

payload: {

id,

answer

}

});

We manually create these by hand.
Redux toolkit has a function called createAction to do this for us.

const questionAdded = createAction("questionAdded");

questionAdded({ description: 'what is the meaning of life' });

const questionAnswer = createAction("questionAnswer");

questionAnswer({ id: 1, answer: '42' });

// get action's type

console.log(questionAdded.type);

console.log(questionAdded.toString());

Hence, in your action creator, we re-factor like so:

export const questionAdded = createAction("questionAdded");

export const questionAnswer = createAction("questionAnswer");

export const questionRemoved = createAction("questionRemoved");

Now, in your reducer you can replace the type with our createAction.type:

export default function reducer(state = [], action) {

switch(action.type) {

case questionAdded.type:

return [

...state,

{

id: ++lastId,

description: action.payload.description,

answer: null

}

];

case questionRemoved.type:

return state.filter(question => question.id !== action.payload.id);

case questionAnswer.type:

return state.map(question => {

if (question.id !== action.payload.id) {

return question;

} else {

return {

...question,

answer: action.payload.answer

}

});

default: return state;

}

Notice this:

case questionAdded.type:

return [

...state,

{

id: ++lastId,

description: action.payload.description,

answer: null

}

];

When we use createAction to create our action object, the parameter we give to createAction is the payload object. Make sure we have properties ‘description’.

make changes in your index.js:

import configureStore from './store/configureStore';

import { questionAdded } from './store/questions';

const store = configureStore();

store.dispatch(questionAdded({ description: 'what color is the sky'}));

store.dispatch(questionAnswer({ id: 1, answer: 'go left' }));

Improving the Reducers

A lot developers don’t like switch statements. Nor do they like returning immutable object patterns.
This is where we can use toolkit. We can create reducer without switch statements. Toolkit uses immer. Automatically translated to immutable update pattern.

Similar to createAction, we use library function createReducer.

When we call this parameter, the first parameter is the initial state

import { createAction, createReducer } from '@reduxjs/toolkit';

createReducer( [], {

// key: value

// action => function (event => eventHandler)

questionAdded: (state, action) => {

state.push({

id: ++lastId,

description: action.payload.description,

answer: action.payload.answer

});

}

});

Under the hood, redux toolkit uses immer, so the manipulation of your state gets translated to immutable updated pattern.

Reminder: immer uses function product with initial state. It takes an argument draftState

draftState is actually a proxy. So it will record all changes applied to a copy of the initial state. Thus, preventing the manipulation of the original object.

produce(initialState, draftState => {

// here we write mutating code

draftState.x = 1;

})

Thus, our function:

(state, action) => {

state.push({

id: ++lastId,

description: action.payload.description,

answer: action.payload.answer

});

}

is actually the draftState anonymous function that does the mutating.

By using the functionality from redux toolkit, you can streamline your code nicely:

question.js

import { createAction, createReducer } from '@reduxjs/toolkit';

export const questionAdded = createAction("questionAdded");

export default createReducer([], {

[questionAdded.type]: (questions, action) => {

questions.push({

id: ++lastId,

description: action.payload.description,

answer: action.payload.answer

});

}

});

Mosh Redux Part 3 (Your own Custom Store)

June 3, 2020Reactadmin

Before moving, we should familiarize ourselves with how Redux is written from scratch.

Previously, when we log the store, we see the public interface with three main functionality:

– getState
– dispatch
– subscribe

Let’s try to implement them.

My Store

function myStore {

let store; // private

// getter to access

function getState() {

return store;

}

return {

getState

}

export default myStore;

We hide our store variable in myStore. It is private.

1 2	import store from './myStore'; store.getState();

Dispatch

Our reducer function gets passed into our constructor.
So we add a reducer parameter.

We create a dispatch function. So by scope, we access the passed in reducer function, and pass in action, and state. Remember in our reducer, we always return the new state. So we reference our state to the returned state.

function MyStore(reducer) {

let state;

function dispatch(action) {

state = reducer(state, action);

}

function getState() {

return state;

}

return {

dispatch,

getState

}

export default MyStore(reducer);

Notify Subscribers (UI components)

When the state of the store gets changed, we want to notify the UI components. Hence we need these UI components be able to subscribe to our store.

store.subscribe(state => {

NavComponent.render(state);

});

function MyStore(reducer) {

let state;

let listeners = [];

function subscribe(listener) {

listeners.push(listener);

}

function dispatch(action) {

// validate action has 'type' property

state = reducer(state, action);

for (let i = 0; i < listeners.length; i++) {

listeners[i]();

}

return {

dispatch,

subscribe,

getState

}