const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));
// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;/* this is for es6 onward */
/* React.memo is the new PureComponent */
import React, { memo } from 'react'
const MyComponent = () => {
return <>something</>
}
export default memo(MyComponent)const MyComponent = React.memo(function MyComponent(props) {
/* only rerenders if props change */
});export const MemoMainPostTopic = React.memo(MainPostTopic);
//or
const MainPostTopic = memo(() => {
...
})
export { MainPostTopic };//index.js:
import { useState } from "react";
import ReactDOM from "react-dom/client";
import Todos from "./Todos";
const App = () => {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState(["todo 1", "todo 2"]);
const increment = () => {
setCount((c) => c + 1);
};
return (
<>
<Todos todos={todos} />
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
</div>
</>
);
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);